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Welcome  to  NetObjects  Fusion 


NetObjects  Fusion®  7  is  the  essential  tool  for  building  effective  Web  sites.  Whether 
you  are  a  professional  Web  site  designer  or  designing  a  site  for  a  small  business  or 
your  family,  you  can  use  NetObjects  Fusion  to  design  your  site  quickly  and  easily. 

Map  out  your  site  structure  by  dragging  and  dropping  page  icons.  NetObjects 
Fusion  automatically  creates  and  updates  navigation  and  links.  Lay  out  your  pages 
quickly  by  dragging  text,  graphics,  and  multimedia  into  place.  Select  from  dozens  of 
SiteStyles®,  or  customize  or  create  your  own  to  apply  a  consistent  visual  theme 
throughout  your  site. 

Build  a  Digital  Photo  Gallery 

Use  the  Photo  Gallery  tool  to  put  your  images  on  the  Web  in  minutes.  Select  the 
images  you  want  to  use,  choose  a  display  format,  and  NetObjects  Fusion  does  the 
rest.  Your  photo  gallery  is  published  to  the  Web  for  your  friends  and  family  to  view. 

Add  Dynamic  Content 

NetObjects  Fusion  makes  it  easy  for  you  to  add  dynamic  content  to  your  site 
whether  you  want  simple  object  animation  or  custom  JavaScript  actions.  You  can 
have  objects  fly  across  the  screen  as  the  result  of  a  site  visitor's  action.  Or  you  can 
launch  a  sequence  of  animations  at  any  given  time.  NetObjects  Fusion  contains 
powerful  message-based  animation  and  interactive  authoring  capabilities  that  you 
can  use  to  achieve  these  effects. 

Build  Your  Site's  Success 

Building  your  site  is  just  the  beginning.  NetObjects  Fusion  provides  direct  access  to 
online  resources  that  offer  information  and  guidance  for  making  your  site 
successful.  You  can  learn  to  host  and  promote  your  site,  set  up  an  online  store,  track 
site  visitors,  and  build  personal  relationships  with  your  customers.  Templates, 
hundreds  of  SiteStyles,  and  components  that  can  add  new  power  to  NetObjects 
Fusion  and  new  features  to  your  Web  pages  are  available  for  you  to  download. 
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How  to  Get  Started  with  NetObjects  Fusion 


How  to  Get  Started  with  NetObjects  Fusion 

To  ensure  success  as  you  start  building  Web  sites  with  NetObjects  Fusion  7,  use  the 
tools  provided  with  the  program  to  get  started  quickly. 

QuickStart  Tips 

For  information  about  basic  NetObjects  Fusion  concepts,  choose  NetObjects 
Fusion  QuickStart  tips  from  the  Help  menu. 

If  you  do  not  have  a  site  open  and  you  go  to  a  NetObjects  Fusion  view,  you  see  a 
page  of  tips  about  working  in  that  view.  Once  you  create  or  open  a  site,  the  View 
tips  are  no  longer  available.  To  see  the  View  tips  again,  close  the  site. 

Step-by-Step 

NetObjects  Fusion  Getting  Started  contains  step-by-step  instructions  that  provide 
the  quickest  path  to  learning  how  to  build  Web  sites  with  NetObjects  Fusion. 

♦  In  Chapter  1,  "Building  a  Site  in  10  Minutes,"  you  build  a  small  site  that 
provides  the  framework  for  all  the  lessons  that  follow. 

♦  Chapter  2,  "Touring  NetObjects  Fusion,"  uses  the  site  you  built  to  introduce 
important  NetObjects  Fusion  features. 

♦  Chapter  3,  "Designing  Site  Navigation,"  shows  you  how  to  set  up  links  to  each 
page  in  the  site  so  site  visitors  have  access  to  all  pages. 

Completing  the  steps  in  the  first  three  chapters  helps  you  develop  the  most  critical 
skills.  You  can  do  the  steps  in  one  or  all  of  the  other  chapters  in  any  order  you 
choose. 

In-Depth  Information 

This  manual,  NetObjects  Fusion  User  Guide,  provides  information  on  all  NetObjects 
Fusion  features  and  functions,  from  the  basics  of  designing  with  text  and  graphics, 
creating  links,  and  so  on,  to  information  about  forms,  data  publishing,  and  using 
NetObjects  Fusion  Components.  Information  in  this  guide  is  arranged  by  topic. 
Take  some  time  to  look  through  this  manual  to  learn  about  the  broad  range  of 
features  available  in  NetObjects  Fusion. 
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Conventions  Used  in  This  Guide 

NetObjects  Fusion  often  provides  multiple  ways  to  accomplish  a  task.  For  example, 
to  display  a  page  in  Page  view,  you  can  click  the  Page  button  on  the  control  bar, 
choose  Page  from  the  View  menu,  or  press  Ctrl+3.  Procedures  in  this  guide 
generally  include  the  most  convenient  method,  but  other  methods  are  usually 
available.  If  you  are  most  comfortable  using  menu  commands,  you  will  probably 
find  the  item  you  are  looking  for  on  a  menu  even  if  it  is  not  explicitly  included  in 
the  steps.  If  you  prefer  using  shortcut  keys,  check  the  NetObjects  Fusion  Quick 
Reference  card  for  information. 

For  readability,  this  manual  presents  all  file  names,  paths,  file  extensions,  HTML 
tags,  and  URLs  like  this.  Example  names  that  you  should  replace  with  your  own 
names  appear  in  bold  italic. 

Both  this  manual  and  the  online  help  assume  you  are  proficient  with  Windows  95, 
Windows  98,  Windows  NT,  Windows  2000,  Windows  ME,  or  Windows  XP.  If  you 
need  help  using  these  systems,  consult  their  respective  user  guides.  This  guide  also 
assumes  you  are  familiar  with  the  World  Wide  Web  and  its  terminology.  For 
general  advice  about  the  Web  and  examples  of  how  to  use  NetObjects®  products, 
visit  Online  view. 
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Click  to  return  to  . 
the  last  topic  you 
viewed 

Click  a  book  to  - 
see  the  topics  it 
contains;  click  a 
topic  to  see 
specific 
information 


Open  this  book 
to  see  keyboard 
shortcuts 


Getting  Help 


NetObjects  Fusion  offers  several  options  for  getting  online  help. 

For  topic  help,  select  Help  Topics  from  the  Help  menu  to  launch  the  help  system 
and  display  the  table  of  contents. 


+  :,,v-  Creating  -and  Managing  Site;  ' 
+  ^  Working  with  Templates 
+  ^  Importing  Sites  and  Documents 
■^t^J  Using  SiteStyles 

_5  What  Is  a  SiteStyle? 
^2  Exploring  Style  View 

  §]  Applying  5iteStyles 

]  Editing  the  Graphic  Elements  of  Sites 
J]  Removing  the  Read  Only  Setting 

  §]  Editing  Banners  and  Buttons 

  §]  Editing  a  Navigation  Bar 

]  Editing  <a  Data  List  icon 

  §]  Editing  a  Style  Background 

:           i]  Editing  the  SiteStyle  Line 

F]  Editing  the  Text  Elements  of  SiteStyl. 
_S]  A  Mote  about  the  Body  and  Normal  (I 
?]  Creating  a  SiteStyle 
U  Mating  a  Mew  Text  Style 
_^  Managing  SiteStyles 
I]  Adding  a  SiteStyle 
|j  Adding  All  Available  SiteStyles 
s)  Removing  SiteStyles 
i]  Styles  Folder  Structure 
El  -^  Managing  Assets 
+  ^  Laying  Out  Pages 
j  "4ft  Adding  Content 
+  ^  Adding  Interactivity 
Z       WorWng  with  HTML 
■E]-^  Quick  Reference 


_L 


SiteStyIRS  are  sets  onhematic  elements  you  can  apply  to  your 
site  Some  swie  elements  ere  graphic  and  others  affectine 
appearance  □rtasrt  en'  your  pages.  In  Style  view,  you  use 
SiteStyles  to  create  the  look  and  feel  of  your  entire  site 
NetObjects  Fusion  comes  with  a  number  of  professionally 
designed  SiteStyles  that  you  can  use  to  design  your  site. 
You  can  use  SiteStyles  as  they  are  or  edit  them.  You  can  also 
create  SiteStyles  using  your  own  artwork. 
Browse  this  section  for  information  about 

•  Applying  SiteStyles   

•  Editing  the  and      elements  of  a  site 
* 

* 

•  .     and  -  SiteStyles 
SMesfolder  structure 


_  Click  to  move 
forward  and 
backward 
through  a 
sequence  of 
related  topics 


-Click  the 
underlined 
text  in  an 
overview 
topic  to  jump 
to  detailed 
information 


To  find  information  in  the  online  topic  help,  click: 

♦  a  book  on  the  Contents  tab  and  then  double-click  a  topic  to  see  the  information 
it  contains. 

Use  the  >>  button  to  move  forward  through  topics  in  sequential  order. 

Use  the  <<  button  to  move  backward  through  the  sequence. 

Click  the  Back  button  to  return  to  the  last  topic  you  viewed. 

Look  at  the  topics  in  the  Quick  Reference  book  to  find  keyboard  shortcuts. 

♦  the  Index  tab  and  enter  a  keyword  related  to  your  topic. 

♦  the  Search  tab  and  type  the  word  or  phrase  you  want  to  search  for. 
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To  see  information  about  a  specific  item  in  any  NetObjects  Fusion  window  or  a 
control  in  a  dialog  or  palette: 

♦  Right-click  the  object  and  then  select  What's  This?  from  the  shortcut  menu. 

♦  Click  the  question  mark  icon  in  the  title  bar  of  a  dialog  or  palette,  then  click  the 
item  you  want  to  learn  about. 

In  either  case,  an  explanation  of  the  item  pops  up. 


You  can  also  highlight  a  menu  command,  then  press  Fl  for  an  explanation,  or  if 
you  are  in  Style  view,  select  an  element  and  press  Fl. 


Page  title:  I  Home 
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CHAPTER  1 


NetObjects  Fusion  Basics 

NetObjects  Fusion  7  incorporates  new  technologies  with  the  current  browser 
environment  to  help  you  meet  today's  site  building  challenges.  Using  NetObjects 
Fusion  you'll  find  it  easy  to  build  dynamic,  content-rich  sites  that  use  the  latest 
interactive  technologies,  including  cascading  style  sheets  and  Dynamic  HTML. 

This  chapter  introduces  NetObjects  Fusion,  including  information  about: 

♦  NetObjects  Fusion  views 

♦  NetObjects  Fusion  window 

♦  Navigating  in  NetObjects  Fusion 

♦  Choosing  colors  and  working  with  color  palettes 

♦  NetObjects  Fusion  folder  structure 
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NetObjects  Fusion  Views 


NetObjects  Fusion  provides  views  that  correspond  to  the  tasks  you  complete  when 
you  design  and  build  a  site.  Changes  you  make  in  one  view  are  reflected  in  the 
others.  You  can  go  to  any  view  at  any  time  by  clicking  a  button  on  the  control  bar  at 
the  top  of  the  NetObjects  Fusion  window. 


K 

Online 

Site 

Page 

Style 

Assets  Publish 

♦  You  see  Online  view  when  you  start  NetObjects  Fusion  (if  you  haven't  changed 
the  settings  on  the  Program  tab  of  the  Application  Options  dialog).  Online  view 
offers  a  variety  of  resources  to  help  you  build  successful  Web  sites.  It  includes 
services  you  can  integrate  into  your  site,  content  you  can  incorporate  on  your 
pages,  how-to  information  to  enhance  your  site  building  experience,  links  to 
NetObjects  and  third-party  resources,  and  much  more. 

♦  Start  with  Site  view  to  create  the  hierarchical  structure  of  a  site  or  to  import  an 
existing  site.  You  can  see  a  structural  map  of  the  site,  which  is  a  graphic  view 
that  shows  how  the  pages  relate  to  each  other,  or  an  outline  view  similar  to 
Windows  Explorer.  You  can  quickly  rearrange  your  site  by  dragging  and 
dropping  pages  and  sections.  See  Chapter  3,  "Creating  and  Managing  Sites." 

♦  Use  Page  view  to  design  pages  and  add  content.  In  Page  view  you  see  the  Layout 
area  and  MasterBorder  of  each  page.  The  Layout  area  displays  objects  that  are 
unique  to  that  page.  The  MasterBorder  contains  objects  that  repeat  on  a  set  of 
pages,  much  as  headers  and  footers  appear  in  a  word  processing  document.  You 
can  also  preview  the  page  as  it  will  appear  in  a  browser  and  view  and  edit  the 
HTML  source.  See  Chapter  6,  "Page  View  Basics." 

♦  A  SiteStyle  consists  of  a  variety  of  elements,  including  navigation  buttons, 
banners,  lines,  and  text.  In  Style  view  you  can  create  your  own  SiteStyle,  or 
choose  from  pre-built  SiteStyles  to  give  your  entire  site  a  consistent  look  and 
feel.  See  Chapter  17,  "Using  SiteStyles." 

♦  Assets  include  the  files,  links,  data  objects,  and  variables  that  you  reference  in 
your  site.  Assets  view  gives  you  centralized  control  over  all  these  referenced 
items.  When  you  change  an  asset,  NetObjects  Fusion  updates  every  reference  to 
that  asset  throughout  the  site.  See  Chapter  28,  "Managing  Assets." 
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Publish  view 


♦  When  you  are  ready  to  publish  the  completed  site,  go  to  Publish  view  to  set  up 
your  server  profiles  and  publish  your  site.  See  Chapter  29,  "Publishing  Your 
Site." 


NetObjects  Fusion  Window 


When  you  start  NetObjects  Fusion  and  create  a  new  blank  site,  you  see  a  window 
containing  a  Home  page  icon,  a  Standard  toolbar  docked  at  the  left  side  of  the 
window,  and  a  Properties  palette. 

The  title  bar,  menu  bar,  and  control  bar  are  at  the  top  of  the  NetObjects  Fusion 
window.  The  title  bar  shows  the  name  of  the  current  site. 


Title  bar  — 
Menu  bar  - 

Control  bar 


Toolbar 


Page  icon  in  Site  view 


Properties  palette 


■  NetObjects  Fusion  -  MySite.nod 

File    Edit    View    Go    Tools  Help 

$    {K               m  <& 

Online         Site          Page         Style        Assets  Publish 

B           <§)  (Jr 

New  Page         Preview  Site       Publish  Site 

Structure  Outline 

a\m\ 

Page  name:  (Home 
Page  title:  (Home 


Custom  Marries... 


Page  type:  Normal 
MasterBorder:  j  DefaultMasterBorder    t  | 
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About  the  Properties  Palette 

When  you  click  an  object  in  Site,  Page,  or  Style  view,  the  properties  palette  changes 
to  display  the  properties  available  for  that  object.  Properties  appear  on  tabs  that  also 
might  change  when  the  selected  object  changes.  For  example,  when  you  select  a  text 
box  in  Page  view,  the  Text  Properties  palette  includes  Text  Box  and  Actions  tabs. 


Edit 

th 

e 

te: 

xt 

:  ■  : 

£2  I©  | 

Background 

Colon  |  Automatic  ^ 
Image:  |  Automatic  -*\ 


~3 


V  Lock  height  HTML...  | 

Size  Layout  to  Teat 

I-  Contents  wrap  to  browser  width 

I-  Textboxisaform  Settings...  | 


When  you  double-click  in  the  text  box  to  edit  the  text,  the  Format  tab  is  added  to 
the  display. 


 n  

Edit 

the 

text 

□ 

A|m|o| 

Forife  (Aiial 


T3 


P 


Fslalll  MM  I 


Style:  Custom  style: 

|lVk,rm.l(P)        3|<™>  3 

Link..,.    |       Anchor...  |      Format.,.  | 


To  shrink  the  properties  palette  to  display  just  its  title  bar,  double-click  the  title  bar 
or  click  the  minimize  button;  do  the  same  thing  again  to  restore  the  full  display.  To 
completely  hide  the  properties  palette,  click  its  close  box.  To  show  the  palette  again, 
from  the  View  menu,  select  Properties  Palette.  A  check  mark  on  the  menu  indicates 
the  palette  is  displayed. 
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About  Toolbars 

When  you  go  to  Site  view,  the  Standard  toolbar  is  docked  at  the  left  side  of  the  Site 
view  window.  Additional  toolbars  are  available  in  Page  view. 

You  can  move  a  toolbar  by  positioning  the  pointer  over  the  double  line  at  its  top 
and  dragging  it  anywhere  in  the  window.  To  dock  the  toolbar,  double-click  its  title 
bar  or  drag  it  to  the  left  side  or  top  of  the  window. 


Position  the  pointer  here  and  drag  to  move  the  toolbar 


Triangle  indicates  tool  is  one  of  a  group 


[□"a  o  a  \ 

Draw  tool  flyout 


Zoom  tools 


A  small  triangle  in  the  lower  right  corner  of  a  tool  button  indicates  the  tool  is  one  of 
a  group.  To  see  the  entire  group,  point  to  the  tool  and  hold  down  the  left  mouse 
button.  A  flyout  containing  the  other  tools  in  the  group  appears.  As  you  move  the 
pointer  over  each  tool,  a  ScreenTip  identifies  the  tool  group  and  the  name  of  the 
specific  tool. 

To  select  a  tool  from  a  flyout,  position  the  pointer  over  the  tool  and  release  the 
mouse  button.  The  tool  you  select  is  displayed  on  the  toolbar.  For  example,  if  you 
point  to  the  Draw  tool  on  the  Page  view  Standard  toolbar  and  hold  down  the  left 
mouse  button,  you  can  draw  a  rectangle,  rounded  rectangle,  ellipse,  polygon,  or 
line. 

To  hide  and  show  toolbars,  from  the  View  menu  choose  Toolbars,  Name  of  toolbar. 
A  check  mark  on  the  menu  indicates  a  toolbar  is  displayed. 

Using  the  Zoom  Tools 

You  can  select  the  Zoom  In  or  Zoom  Out  tool  from  the  Standard  toolbar  in  Site  and 
Page  views.  The  Zoom  In  tool  is  a  magnifying  glass  with  a  plus  sign;  the  Zoom  Out 
tool  has  a  minus  sign. 

You  can  reverse  the  function  of  the  current  Zoom  tool  by  holding  down  the  Alt  key. 
For  example,  if  the  selected  Zoom  tool  is  Zoom  In,  pressing  Alt  changes  it  to  Zoom 
Out.  When  you  release  the  Alt  key,  it  becomes  Zoom  In  again. 
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Navigating  in  NetObjects  Fusion 

NetObjects  Fusion  provides  several  navigation  tools,  including  buttons  on  the 
control  bar  and  the  Go  menu. 


Using  the  Control  Bar  Buttons 


Preview  Site 


You  use  the  buttons  on  the  control  bar  to  move  between  views.  See  "NetObjects 
Fusion  Views"  on  page  8.  Some  of  the  buttons  in  the  middle  of  the  control  bar 
change  depending  on  the  view.  For  example,  in  Site  view  and  Page  view  you  see  a 
New  Page  button  and  in  Publish  view  you  see  a  Publish  Settings  button. 

To  see  how  the  site  will  appear  in  the  browser  you  specify  in  the  Application 
Options  dialog,  click  the  Preview  Site  button. 

Using  the  Go  Menu 

The  Go  menu  provides  all  the  navigation  features  in  one  place  and  shows  equivalent 
keyboard  shortcuts.  A  dot  to  the  left  of  a  command  indicates  the  current  view. 

Go  menu  presents 
navigation  commands 
and  keyboard  navigation 
shortcuts 


•  Page  Design 

HTML  Source 

Page  Preview 

Online 

Ctrl+1 

Site 

Ctrl+2 

•  Page 

Ctrl+3 

Style 

Ctrl+4 

Assets 

Ctrl+5 

Publish 

Ctrl+6 

Next  Page 

Ctrl+  Right 

Previous  Page 

CM+  Left 

Parent 

Ctrl+  Up 

First  Child 

Ctrl+  Down 

Follow  Link 

Ctrl+Shift+K 

Go  To... 

Ctrl+G 

Last 

Ctrl+< 

Recent... 

Preview 

Alt+P 

The  Go  menu  commands  vary  slightly  from  view  to  view. 

♦  From  all  views  you  can  go  to  any  other  view  or  the  current  view's  subviews. 
From  Page  view  you  can  also  go  to  other  pages. 
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♦  Use  the  Go  To  command  to  find  any  named  object  in  your  site.  To  search  the 
entire  site  for  any  named  NetObjects  Fusion  item  (a  page,  layout,  SiteStyle,  data 
list,  and  so  on),  choose  Go  To  from  the  Go  menu. 


Goto:  1 

(*  Begins  with     C  Contains  C  Ends  with 

[        OK       |  Cancel 

In  the  Go  To  dialog,  enter  the  name,  or  partial  name,  of  the  item  you  want  to 
locate,  choose  Begins  with,  Contains,  or  Ends  with,  and  click  OK.  If  only  one 
object  meets  your  criteria,  NetObjects  Fusion  opens  the  appropriate  view  or 
dialog  to  display  the  object.  If  several  objects  meet  your  criteria,  NetObjects 
Fusion  lists  them  so  you  can  pick  one. 

♦  Use  the  Last  command  to  go  to  the  last  page  or  view  you  were  working  on. 

♦  Use  the  Recent  command  to  select  from  a  list  of  the  views  and  pages  you 
displayed  during  the  current  session. 

♦  Use  the  Preview  command  to  launch  your  browser  and  display  a  preview  of 
your  site. 


Using  Shortcut  Menus 

NetObjects  Fusion  provides  shortcut  menus  you  open  by  right-clicking  an  item. 
The  menu  lists  the  commands  you  can  use  on  the  selected  item.  In  all  views  and  in 
dialogs  and  properties  palettes,  you  can  right-click  an  item  and  select  What's  This? 
from  the  shortcut  menu  to  display  a  description  of  the  item. 


New  Page 
Delete  Page 
Go  To  Page 


Insert  Template... 
Import  Web  Site... 
Reference  HTML... 
Page  Character  Set.. 


What's  This? 


Right-click  a  page  icon 
in  Site  view  to  see  this 
shortcut  menu 
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Choosing  Colors 


In  NetObjects  Fusion,  whenever  the  properties  palette  includes  a  Color  button,  you 
can  change  the  color  of  the  selected  object.  For  example,  you  can  change  the  color 
of  the  page  icons  or  the  background  in  Site  view,  objects  in  Page  view,  or  button  text 
color  in  Style  view. 

To  choose  a  color  for  a  selected  object: 

1.   Click  the  Color  button  in  any  properties  palette  where  it  is  offered. 
The  Color  Picker  appears. 


■■■■■■■■I 


Original: 
New: 


Red:  |255 

Green:  [255 

Blue:  [255 

HTML:  ISFFFFFF 


Current  palette 


Colors  you  used 
recently 


The  name  of  the  current  palette  is  shown  above  the  color  display.  The  last  eight 
colors  you  selected  from  the  palette  are  displayed  in  the  Recent  Colors  boxes. 

2.  Click  the  color  you  want  to  assign  to  the  object. 

The  Original  and  New  boxes  show  the  original  color  and  the  color  you  just 
selected.  RGB  and  HTML  hexadecimal  values  are  also  displayed. 

You  might  see  a  warning  that  the  selected  color  is  not  Web  safe.  To  avoid 
unexpected  results  for  your  site  visitors,  choose  colors  that  are  Web  safe. 

3.  Click  OK. 

The  new  color  appears  in  the  selected  object. 
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Working  with  Color  Palettes 

When  you  choose  colors  for  the  objects  in  your  site,  you  select  from  the  palette 
offered  in  the  Color  Picker.  You  can  use  the  Browser  Safe  Palette,  which  contains 
colors  that  are  Web  safe,  the  system  palette  used  by  Windows,  a  palette  you  import 
from  another  application  such  as  Adobe  Photoshop,  or  a  custom  palette  you  create. 

Choosing  a  Color  Palette 

1 .  Click  the  Color  button  in  any  properties  palette  where  it  is  offered. 
The  Color  Picker  appears. 

2.  Select  a  palette  from  the  drop-down  list  at  the  top  of  the  dialog.  If  you  choose 
Custom  Palette  and  want  to  load  an  existing  custom  palette,  see  "Loading  a 
Custom  Color  Palette."  To  create  your  own  custom  palette,  see  "Creating  or 
Editing  a  Color  Palette." 

The  palette  is  displayed  in  the  Color  Picker  until  you  change  it. 

3.  Click  OK. 

Loading  a  Custom  Color  Palette 

1.  Click  the  Color  button  in  any  properties  palette  where  it  is  offered. 
The  Color  Picker  appears. 

2.  Select  Custom  Palette  from  the  drop-down  list  at  the  top  of  the  dialog. 
An  all  white  palette  appears. 

3.  Click  Load. 

4.  In  the  Open  dialog,  navigate  to  the  palette  you  want  to  use,  then  click  Open. 
This  palette  is  displayed  in  the  Color  Picker  until  you  change  it. 

5.  Click  OK  to  close  the  Color  Picker. 
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Creating  or  Editing  a  Color  Palette 

1 .  Click  the  Color  button  in  any  properties  palette  where  it  is  offered. 
The  Color  Picker  appears. 

2.  Select  Custom  Palette  from  the  drop-down  list  at  the  top  of  the  dialog. 
An  all  white  palette  appears. 

3.  Click  a  box  in  the  palette  area. 

4.  Set  the  RGB  values  for  the  color  you  want  to  add  to  the  palette,  type  the 
hexadecimal  (HTML)  value  for  the  color,  or  double-click  the  blank  box  and 
choose  or  create  a  color  in  the  Color  dialog. 

5.  Repeat  steps  3  and  4  for  each  color  you  want  to  add  to  the  palette. 

6.  Click  Save. 

7.  In  the  Save  As  dialog,  type  a  file  name  for  the  palette  and  click  Save. 
The  new  palette  is  displayed  in  the  Color  Picker  until  you  change  it. 

NetObjects  Fusion  Folder  Structure 

The  NetObjects  Fusion  7  folder  contains  all  the  files  you  need  to  use  NetObjects 
Fusion. 

Do  not  move  or  rename  the  NetObjects  Fusion  7  folder  or  any  folders  within  it.  If  you 
need  to  relocate  the  NetObjects  Fusion  folder,  you  must  uninstall  and  reinstall  the 
program.  NetObjects  Fusion  performs  best  when  the  application  and  its  parts 
remain  in  the  folder  recommended  during  installation.  This  is  especially  true  with 
the  \User  Sites  folder.  Since  NetObjects  Fusion  keeps  track  of  assets  and  links,  folder 
names  and  locations  are  very  important.  If  you  change  names  and/or  locations 
using  Windows  Explorer  or  File  Manager,  NetObjects  Fusion  might  not  be  able  to 
track  assets  and  links  properly. 

The  subfolders  organize  files  according  to  their  use: 

♦  \Components  contains  the  NetObjects  Fusion  Components,  mini-applications 
that  can  add  sophisticated  functions  to  your  site.  See  Chapter  25,  "Using 
NetObjects  Fusion  Components." 

♦  \F5I  Updater  contains  files  required  to  auto  update  NetObjects  Fusion. 

♦  \Java  contains  Java  applets  and  beans. 
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♦  \NetObjects  System  contains  files  used  by  the  program;  do  not  delete  or  remove 
these  files. 

♦  \QuickStart  contains  files  used  to  display  basic  NetObjects  Fusion  concepts  when 
you  choose  NetObjects  Fusion  QuickStart  Tips  from  the  Help  menu,  plus  files 
for  the  View  tips  and  the  Site  wizard. 

♦  \ReadMe  contains  important  information  about  this  version  of  NetObjects 
Fusion. 

♦  \Sample  Sites  contains  one  site  that  demonstrates  NetObjects  Fusion  7  features. 

♦  \Styles  contains  a  separate  folder  for  each  SiteStyle,  including  the  ones  you 
create.  See  Chapter  17,  "Using  SiteStyles." 

♦  \Templates  contains  the  AutoSites™  folder,  which  contains  the  Blank  Site  and 
Import  templates  that  you  use  to  create  a  new  site  or  to  import  a  site.  See 
Chapter  4,  "Working  with  Templates." 


Warning:  Do  not  delete  or  move  the  AutoSites  folder.  This  folder  contains  files 
necessary  for  NetObjects  Fusion  to  run  correctly. 

♦  \Tutorial  contains  the  assets  you  need  for  the  lessons  in  NetObjects  Fusion  Getting 
Started. 

♦  \User Sites  contains  all  the  sites  you  create.  For  each  site,  NetObjects  Fusion 
automatically  creates  a  subfolder  within  \User  Sites  to  keep  your  projects 
organized.  Each  NetObjects  Fusion  site  is  saved  with  a  .nod  extension.  The  site 
folder  also  includes  an  \Assets  folder  where  the  assets  originally  included  in  the 
site  template  are  saved,  a  \Preview  folder  where  HTML  sufficient  for  previewing 
but  not  for  publishing  is  stored,  and  a  \Backups  folders  where  backup  .nod  files 
are  saved.  After  you  publish  the  site,  a  \Local  Publish  folder  is  added.  You  can  also 
save  sites  in  other  locations. 
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Setting  Application  Options 

Application  option  settings  affect  all  sites  you  work  on  in  NetObjects  Fusion.  You 
can  change  settings  from  any  view  by  choosing  Options>Application  from  the 
Tools  menu.  Changes  take  place  as  soon  as  you  click  OK  to  close  the  Application 
Options  dialog. 

This  chapter  explains  how  to  set: 

♦  Program  options 

♦  Preview  options 

♦  Text  options 

♦  International  options 

♦  Update  options 

For  information  about  site-specific  options,  see  "Setting  Options  for  the  Current 
Site"  on  page  48. 
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Setting  Program  Options 

Z)  From  the  Tools  menu,  choose  Options>Application. 

The  Program  tab  of  the  Application  Options  dialog  appears. 


Application  Dpi 


Program  |  Preview  |  Text    1  International  1  Updates  1 


17  Ruto  save; 

P  Application  whdow  maximized  at  startup 
I-  Open  to  most resent^), usfiid file  at  startup 
I-  0  pen  file  to  most  recent  vie'/'.' 
17  Use  smallfonts  in  properties  palette 
&  Compact  database  upon  exit 


External  rile  editors 


Measurement  units:     |  Pixels 


♦  Auto  save.  When  this  option  is  selected,  your  site  is  saved  each  time  you  change 
views  or  pages  and  when  you  close  NetObjects  Fusion.  If  you  clear  the  Auto  save 
check  box,  be  sure  to  save  your  site  periodically  by  choosing  Save  Site  from  the 
File  menu. 

♦  Application  window  maximized  at  startup.  If  you  clear  the  check  box  for  this 
option,  the  NetObjects  Fusion  window  opens  in  the  last  size  you  set,  rather  than 
full  screen  size. 

♦  Open  to  most  recently  used  file  at  startup.  When  this  option  is  selected,  the  last  site 
you  worked  on  opens  automatically  when  you  start  NetObjects  Fusion.  If  Open 
to  most  recent  view  is  also  selected,  the  site  is  displayed  in  the  last  view  you 
worked  in.  If  this  option  or  Open  to  most  recent  view  is  cleared,  you  see  Online 
view  when  you  start  NetObjects  Fusion.  If  you  switch  to  another  view  before 
opening  a  site,  you  see  View  tips. 

♦  Open  file  to  most  recent  view.  If  this  option  is  selected,  when  you  open  a  site,  it  is 
displayed  in  the  last  view  you  worked  in. 
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♦  Use  small  fonts  in  properties  palette.  If  you  clear  this  check  box,  you  see  larger 
properties  palettes  in  Page  view.  To  maximize  the  area  available  for  your  page 
Layout,  leave  this  option  selected. 

♦  Compact  database  upon  exit.  This  option  is  selected  by  default.  Compacting  the 
files  can  save  you  substantial  hard  disk  space.  In  addition,  when  this  option  is 
selected,  NetObjects  Fusion  performs  an  error-checking  procedure  to  verify 
your  database  as  it  compacts  the  files.  It  is  recommended  that  you  do  not  change 
this  setting. 


Warning:  Do  not  shut  down  Windows  while  the  file  is  being  compacted.  This  could 
cause  your  .nod  file  to  become  unstable. 

♦  External  file  editors.  You  can  select  default  applications  for  editing  .html,  .gif,  and 

jpg  files  from  within  NetObjects  Fusion.  You  launch  the  default  HTML  editor 
by  right-clicking  the  external  HTML's  icon  in  Page  view  and  selecting  Open  File 
In  External  Editor  from  the  shortcut  menu.  You  launch  the  default  image  editor 
by  right-clicking  the  image  in  Page  view  or  Style  view  or  the  image  name  in 
Assets  view,  and  selecting  Open  File  In  External  Editor  from  the  shortcut  menu. 
To  choose  an  external  file  editor,  click  Browse  and  find  the  file  that  launches  the 
application. 

♦  Measurement  units.  Choose  the  measurement  unit  you  want  to  use  as  you  build 
your  site.  Choose  pixels  for  the  most  consistent  results  independent  of  monitor 
resolution. 
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Z)  From  the  Tools  menu,  choose  Options>Application  and  click  the  Preview  tab. 


Application  Dpi 


Program  i  Fre^  ;|  Tewt    |  International!  Updates  1 
Select  previewing  default 


Preview  scope 
C°  Current  page  Entire  site 


r-Window  size  — 
*™  Maximized 
r  040  x  400 
f*  800  x  BOO 
r  1024  x  70S 


Installed  browsers 
are  shown  here 


Select  previewing  default.  When  you  install  NetObjects  Fusion,  it  lists  the 
browsers  installed  on  your  system.  If  installed  browsers  are  not  listed,  you  can 
add  them  to  the  list.  Choose  the  Web  browser  you  want  to  use  for  previewing 
sites  by  selecting  its  check  box.  To  change  the  browser  used  for  previewing, 
return  to  this  dialog  and  choose  a  different  browser. 

To  add  a  browser  to  the  list,  click  Add.  In  the  New  Browser  dialog,  type  a  name 
for  the  browser,  browse  to  the  shortcut  or  .exe  file  that  launches  it,  and  click  OK. 

To  remove  a  browser  from  the  list,  select  it  in  the  list  and  click  Remove. 

To  change  a  browser's  name  or  location,  select  the  browser  in  the  list  and  click 
Edit.  Enter  the  new  information  and  click  OK. 

Preview  scope.  Choose  whether  you  want  to  preview  only  the  current  page  or  the 
entire  site  you  are  working  on  when  you  click  the  Preview  Site  button  on  the 
control  bar.  Previewing  the  entire  site  takes  longer,  but  you  can  move  from  page 
to  page  in  the  browser  to  test  the  site's  navigation  buttons.  Select  the  Current 
page  option  to  preview  only  the  current  page.  When  you  select  Current  page, 
links  to  other  pages  are  disabled.  You  can  also  preview  the  current  page  by 
clicking  the  Page  Preview  tab  in  Page  view. 


22 


Chapter  2    Setting  Application  Options 


You  can  use  keyboard  shortcuts  to  preview  either  the  whole  site  or  just  the 
current  page  or  section: 

■v-  If  Entire  site  is  selected  in  the  Applications  Options  dialog,  pressing  Alt+P  or 
clicking  the  Preview  Site  button  previews  the  entire  site;  pressing  Ctrl+ Alt+P 
or  clicking  the  Preview  Site  button  while  pressing  Ctrl  previews  just  the 
current  page. 

❖  If  Current  page  is  selected  in  the  Options  dialog,  pressing  Alt+P  or  clicking 
the  Preview  Site  button  previews  the  current  page;  pressing  Ctrl+ Alt+P  or 
clicking  the  Preview  Site  button  while  pressing  Ctrl  previews  the  entire  site. 

♦   Windowsize.  Select  the  window  size  or  resolution  most  appropriate  for  your  site 
visitor's  monitors.  This  opens  a  preview  window  sized  to  the  resolution  you 
select  so  you  can  see  how  site  visitors  will  view  your  site. 

Setting  Text  Options 

Z>  From  the  Tools  menu,  choose  Options>Application  and  click  the  Text  tab. 

^^^^ 

Program  |  Preview  Inl   national  |  Updates] 

-  Browser  tont  settings  

Proportional:  |  T  imes  N  e'M  R  Oman  T|  [12 


Fiaed  width:  [Courier  Nem         3  F°  3 


OK       |        Cancel  | 


♦  Browser  font  settings.  To  ensure  that  your  pages  appear  in  your  browser  the  way 
you  design  them  in  NetObjects  Fusion,  choose  the  same  font  settings  in  your 
browser  that  you  use  in  your  site.  For  example,  if  you  use  Times  New  Roman, 
size  12,  and  Courier  New,  size  10,  for  your  browser  proportional  and  fixed 
width  fonts,  choose  the  same  fonts  and  sizes  in  NetObjects  Fusion.  The 
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suggested  settings  are  the  defaults  used  by  Microsoft  Internet  Explorer  and 
Netscape  Navigator  when  they  are  installed. 

These  settings  do  not  change  the  actual  font  in  the  HTML  generated  by 
NetObjects  Fusion;  they  only  mimic  the  effect  of  a  font  change.  To  change  the 
font,  see  "Modifying  a  Text  Style"  on  page  163. 

NetObjects  Fusion  sizes  text  boxes  based  on  the  expected  font  size,  so  when  you 
change  sizes,  you  change  the  Layout  of  the  page  slightly. 

Automatically  select  entire  word.  If  this  option  is  selected,  when  you  start  to  drag 
the  mouse  pointer  over  a  word,  NetObjects  Fusion  automatically  selects  the 
entire  word  and  the  space  after  it. 

Smart  spell  check.  If  this  option  is  selected,  after  NetObjects  Fusion  checks 
spelling  of  a  text  block,  it  does  not  check  the  same  text  again  unless  you  modify 
the  text  or  clear  this  option. 


Setting  International  Options 


D  From  the  Tools  menu,  choose  Options>Application  and  click  the  International 
tab. 


Application  Dpi 


Program  |  Preview  |  Text    ;  ln:ernaHo-al  |  Updates  j 


Formats 


DateAime:   |  Use  System  Setting 


Decimal:     |Use  System  Setting 


~3 


Spelling  dictionary:    I  US  English 

Sort  order:  |ll  --  System  Setting  ~*\ 


Imported  HTML  

Imported  tent  uses  character  set: 
|  Specified  in  imported  Mela  tag 


♦  Date,  time,  and  decimal  formats.  The  date,  time,  and  decimal  formats  you  select 
affect  how  these  items  are  displayed  wherever  they  appear  in  NetObjects  Fusion; 
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for  example,  the  last  published  date  of  items  in  Publish  view.  These  settings  do 
not  affect  generated  HTML  or  text  you  enter  on  Web  pages. 

Select  a  format  from  the  Date/time  drop-down  list.  A  sample  of  the  format  is 
shown  next  to  each  language.  To  determine  the  decimal  point  character,  select  a 
format  from  the  Decimal  drop-down  list.  If  you  choose  Use  System  Setting  for 
either  option,  NetObjects  Fusion  uses  the  setting  in  the  Windows  Regional 
Settings  Properties  dialog. 

♦  Spelling  dictionary.  Select  the  dictionary  you  want  to  use  when  checking  spelling. 

♦  Sort  order.  Character  variations  between  languages  result  in  variations  in  sorting 
priorities.  To  ensure  that  items  in  Assets  view  and  Publish  view  are  sorted 
correctly,  you  can  choose  the  appropriate  sort  order.  This  affects  only  how  the 
items  are  displayed  in  NetObjects  Fusion;  it  does  not  affect  the  generated 
HTML.  If  you  choose  Use  System  Setting,  NetObjects  Fusion  uses  the  current 
system  sort  setting. 

♦  Imported  text  uses  character  set.  Choose  the  character  set  you  want  to  apply  to  text 
in  imported  sites.  For  information  about  character  sets,  see  "Working  with 
Character  Sets"  on  page  483. 
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Updating  NetObjects  Fusion 


Z)  From  the  Tools  menu,  choose  Options>Application  and  click  the  Updates  tab. 


Application  Dpi 


Program  |  Preview  j  Text    ]  Internal     |  ™t>& 


Check  for  updates  

P"  Automatically 

f  Manually  ■  only  when  Check  foi  Updates  is 
selected  from  the  Tools  menu 


Update  frequency 
r  Daily 
(•  Weekly 
r  Monthly 


Check  for  update;  when  NetObjects  rusion: 
C  Launches 

Connects  to  the  Internet 


Update  status: 

Date  last  checked:  4/1/02 
Date  of  last  update:  4/1/02 


Set  your  preferences  for  checking  for  online  program  updates.  Select 
Automatically  to  check  for  updates  using  the  frequency  and  event  you  specify,  or 
Manually  to  check  only  when  you  select  Check  for  Updates  from  the  Tools 
menu.  Automatically  is  the  default  setting. 

If  you  select  Automatically: 

♦  Select  an  update  frequency  of  Daily,  Weekly,  or  Monthly. 

♦  Choose  when  you  want  to  check  for  updates.  Select: 

"v-  Launches  to  search  for  updates  each  time  you  start  NetObjects  Fusion. 

>  Connects  to  the  Internet  to  search  for  updates  when  you  connect  to  the 
Internet  while  using  NetObjects  Fusion.  This  is  the  default  setting. 
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Creating  and  Managing  Sites 

Site  view  is  where  you  create,  view,  and  maintain  the  architecture  of  your  site.  Site 
view  frees  you  from  the  details  of  file  and  link  management,  so  you  can  focus  on 
organizing  and  updating  your  site.  For  example,  you  can  drag  a  page  or  section  to 
any  location  in  Site  view,  and  NetObjects  Fusion  updates  the  links  to  other  pages 
automatically. 

This  chapter  describes  Site  view  and  its  automated  site-building  capabilities, 
including: 


♦ 

Starting  NetObjects  Fusion 

♦ 

Starting  with  a  blank  site 

♦ 

Opening  an  existing  site 

♦ 

Working  with  the  SiteStructure 

♦ 

Selecting  pages 

♦ 

Setting  page  properties 

♦ 

Adding,  copying,  deleting,  and  moving  pages 

♦ 

Renaming  pages 

♦ 

Assigning  custom  names 

♦ 

Working  with  the  site  outline 

♦ 

Printing  the  SiteStructure 

♦ 

Saving  and  backing  up  your  site 

♦ 

Changing  site  settings 
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Starting  NetObjects  Fusion 

When  you  install  NetObjects  Fusion,  it  is  added  to  your  Windows  Start  menu. 

1.  From  the  Start  menu,  choose  Programs>NetObjects>NetObjects  Fusion  7. 

2.  Follow  the  onscreen  instructions  to  configure  your  system,  or  skip  this  for  now 
and  continue. 

3.  You  can  use  the  Site  wizard  to  create  a  site  or  go  directly  to  NetObjects  Fusion 
Online  view. 

❖  If  you  choose  the  Site  wizard,  follow  the  onscreen  instructions  to  create  your 
site. 

■v-  To  create  a  blank  site  or  open  an  existing  site,  see  "Creating  and  Opening 
Sites"  on  page  29. 

To  create  a  new  site  based  on  a  NetObjects  Fusion  template  file,  see 
Chapter  4,  "Working  with  Templates." 

■v-  To  create  a  site  from  an  existing  Web  site,  see  Chapter  5,  "Importing  Sites 
and  Documents." 

After  the  first  launch,  you  can  set  Application  Options  so  NetObjects  Fusion 
automatically  opens  the  last  site  you  worked  on  in  the  last  view  you  used.  See 
"Setting  Program  Options"  on  page  20. 

Working  with  Site  Files 

A  NetObjects  Fusion  site  file  is  a  relational  database  of  information  about  your  site. 
Site  files  have  a  .nod  extension. 

Site  files  are  stored  in  a  folder  that  has  the  same  name  you  give  the  site.  For  example, 
if  you  name  the  site  MySite,  the  site's  folder  is  called  MySite,  and  the  site  file — 
MySite.nod — is  saved  inside  the  folder.  The  site  folder  contains  an  \Assets  folder  with 
the  asset  files  used  in  the  site,  as  well  as  a  \Backups  folder.  Once  you  preview  the  site, 
a  \Preview  folder  is  added,  and  when  you  publish  the  site  locally,  a  \Local  Publish 
folder  is  added  as  long  as  you  do  not  change  the  default  local  publish  location. 

By  default  your  site  folder  is  saved  inside  the  \User  Sites  folder,  but  you  can  store  the 
site  in  any  location  on  your  local  computer.  Because  the  paths  to  the  assets  in  a  site 
file  are  absolute — they  include  the  drive  and  folder  names — you  cannot  save  the  site 
file  on  another  computer  on  a  network.  To  move  a  site  to  another  computer,  you 
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must  export  the  site  as  a  template,  as  described  in  Chapter  4,  "Working  with 
Templates." 

It's  a  good  idea  to  check  the  size  of  your  .nod  files  periodically.  Some  site  designs 
may  cause  a  sudden  increase  in  the  size  of  the  .nod  file.  If  this  happens,  choose 
Re-optimize  from  the  Tools  menu.  This  command  can  increase  the  efficiency  of  the 
open  site  file.  For  additional  assistance,  contact  NetObjects  Technical  Support. 

Creating  and  Opening  Sites 

When  you  create  a  site,  you  always  begin  with  a  template.  You  can  also  derive 
templates  from  sites  you  create. 

A  template  is  a  fully  designed  page  or  site  that  you  can  use  as  a  starting  point  for 
your  own  pages  or  sites.  A  typical  template  might  include  a  banner  and  navigation 
buttons,  an  assigned  SiteStyle,  and  text  or  other  content.  You  can  start  a  new  site 
from  a  template  or  insert  one  into  your  current  site.  Once  inserted  into  a  site,  you 
can  modify  template  pages  any  way  you  like.  Templates  are  described  in  detail  in 
Chapter  4,  "Working  with  Templates." 

You  can  also  open  an  existing  site  and  add  to  it,  change  its  style,  or  modify  it. 

Starting  with  a  Blank  Site 

You  can  build  a  new  site  from  a  blank  site,  which  is  a  template  that  consists  of  a 
Home  page  with  a  banner  and  navigation  buttons. 

To  start  with  a  blank  site: 

1.   From  the  File  menu,  choose  New  Site>Blank  Site. 
The  New  Blank  Site  dialog  appears. 
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2.   Enter  a  site  name  in  the  dialog. 


iNew  Blank  Site 

Save  in:       J  fc3  User  Sites 

d  M  m  \k 

J  MySite 
j  NewSite 


File  name:  iMountainJacques) 


Saveastype:  |  NetObjects  Fusion  Files  (K.nod) 

Cancel 


3.   Click  Save. 

Site  view  opens  and  displays  a  Home  page.  You  can  begin  developing  the 
SiteStructure,  as  described  on  page  39. 


NetObjects  Fusion  -  MountainJacques.nod 


File   Edit   View   Go   Tools  Help 
S  A  B 


Site  Page         Style        Assets      Publish      1      New  Page        Preview  Site      Publish  Site 

Structure  j  Outline  | 


Pagerttle:  |Home 


Custom  Man 
P^ge  type:  Normal 


MssisrBordsr  |  J;i.;ijifiVfeierBorder 
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Starting  with  the  Site  Wizard 

You  can  also  start  a  new  site  using  the  Site  wizard. 

1.  In  Site  view,  from  the  File  menu,  choose  New  Site>Using  Site  Wizard. 
The  introductory  Site  wizard  dialog  appears. 

2.  Follow  the  onscreen  instructions  to  build  your  site. 

Opening  an  Existing  Site 

1.   From  the  File  menu,  choose  Open  Site. 
The  Open  dialog  appears. 


|Open 

Look  in:       |  _J  User  Sites 

zi  eJ  o\  \m  mJ 

 I  MountainJacques 

_l  MySite 
 I  NewSite 


Filename:       [j  j      Open  j 

Files  of  type:    |  NetObjects  Fusion  Files  (*.nod) Cancel  j 

2.  Open  the  folder  that  contains  the  site  you  want  to  open. 

3.  Select  the  site's  .nod  file  and  click  Open. 

You  can  also  open  an  existing  site  by: 

♦  Choosing  it  from  the  list  of  recently  used  files  on  the  File  menu. 

♦  Choosing  it  from  the  list  of  sites  in  Online  view. 

♦  Double-clicking  the  .nod  file  in  Windows  Explorer. 

♦  Dragging  the  .nod  file  from  Windows  Explorer  to  the  NetObjects  Fusion 
window. 


31 


Working  with  the  SiteStructure 


Working  with  the  SiteStructure 

In  Site  view,  the  structure  of  your  site  is  represented  by  page  icons.  As  in  a  family 
tree,  pages  have  parent,  child,  and  sibling  relationships. 


v  / 


Mission 

Events 

Next  Tour 

Contest 

Activities 

Highlights 

The  pages  named  Mission,  Events, 
Next  Tour,  and  Contest  are  children  of 
the  Home  page  and  siblings  of  each 
other.  The  Events  page  is  the  parent 
of  Activities  and  Highlights  and  the 
Contest  page  is  the  parent  of  Wonder 
Lodge 


In  Site  view  you  can  add  pages  to  the  site,  rename  pages,  move  them,  copy  them, 
delete  them,  and  complete  other  site-oriented  actions.  To  add  content  to  a 
particular  page — for  example,  to  add  text  or  pictures — use  Page  view.  As  you 
construct  a  site,  you  typically  go  back  and  forth  between  Site  view  and  Page  view. 

Selecting  a  Page 

Before  you  can  add,  copy,  rename,  or  move  pages,  or  set  page  properties,  you  must 
select  a  page.  By  selecting  a  page,  you  identify  it  as  the  one  you  will  work  with. 
NetObjects  Fusion  places  a  blue  border  around  the  selected  page. 


Selected  page  has  a 
blue  border 


Mission 

Events 

Next  Tour 

Contest 

!  1 

Activities 

Highlights 
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To  select  a  page: 

♦  Click  the  Selection  tool  on  the  toolbar  and  then  click  the  icon  for  the  page  you 
want  to  select.  Don't  click  the  page's  name  unless  you  want  to  rename  the  page. 

♦  Press  the  arrow  keys  to  select  the  current  page's  parent,  child,  or  sibling  pages. 

Working  with  a  Group  of  Pages 

In  addition  to  selecting  individual  pages,  you  can  select  several  pages  and  change 
their  properties.  You  can  select  any  combination  of  noncontiguous  pages  or  you 
can  select  a  section  of  your  site,  which  is  any  page  and  all  its  children,  their  children, 
and  so  on. 

To  select  noncontiguous  pages: 

1 .  Click  the  first  page  to  select  it. 

2.  Shift+Click  additional  pages  to  select  them. 

NetObjects  Fusion  places  a  border  around  each  selected  page  and  lists  the  pages 
on  the  Selected  Pages  tab  of  the  Properties  palette. 


Mission         Events        NextTour  Contest 

LJ  LJ  LJ  LJ 


Activities 

n 

Highlights 

|  MasterBorder 
Property 

|  DefaultMasterBortjJ       Set  on; 

I  Page  name  MasterBorder 

Events  DefaultMasterBorder 

Activities  DefaultMasterBorder 

Contest  DefaultMasterBorder 

Home  DefaultMasterBorder 


1 


To  select  a  section: 

1.  Click  the  parent  page  of  the  section. 

2.  Shift+Click  the  parent  page  of  the  section. 
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Setting  Properties 


NetObjects  Fusion  places  a  border  around  each  page  in  the  section  and  lists  the 
pages  on  the  Selected  Pages  tab  of  the  Properties  palette. 


V  J 


V  f 


NeKtTour  Contest 


Highlights 


o  Id  I 

Property: 
|  MasterBorder 
Property 

|  DefaultMasterBort  _*J       Set  on  all  | 


Page  name  MasterBorder 


Events  DefaultMasterBorder 
Activities  DefaultMasterBorder 
Highlights  Default  MasterBorder 


Sections  are  not  permanent  entities.  You  can  deselect  the  section  by  clicking  any 
page  in  the  site,  or  by  clicking  the  Site  view  background. 


Setting  Properties 

Pages  have  properties.  Some  properties  affect  the  published  site;  others  are  for  your 
information  only.  For  example,  you  can  assign  colors  to  the  page  icons  to  create 
visual  groups  that  indicate  which  pages  are  finished  or  which  are  assigned  to  a 
particular  designer.  You  can  instruct  NetObjects  Fusion  not  to  publish  a  particular 
page,  note  if  a  page  is  done,  and  enter  comments  about  the  selected  page. 
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Setting  Page  Properties 


You  set  the  following  properties  on  the  Page  tab  of  the  Properties  palette: 




[Home 
I  Home 


♦  Page  name.  Name  assigned  to  the  page  that  is  used  on  the  page  icon  in  Site  view 
and  the  banners  and  navigation  bar  buttons  generated  by  NetObjects  Fusion. 
See  "Renaming  Pages"  on  page  42. 

♦  Page  title.  Text  that  appears  in  the  title  bar  of  the  browser  window  when  it 
displays  this  page.  When  site  visitors  bookmark  this  page,  the  page  title  is  used. 
The  title  is  also  emphasized  in  search  engine  queries. 

♦  Custom  Names.  See  "Using  Custom  Button  and  Banner  Names  and  File 
Extensions"  on  page  43. 

♦  Page  type.  Shows  whether  the  page  is  a  normal  page  or  a  stacked  page.  You 
cannot  change  this  setting;  it  is  determined  by  how  the  page  was  created.  For 
information  about  stacked  pages,  see  Chapter  26,  "Data  Publishing." 

♦  MasterBorder.  Shows  the  MasterBorder  assigned  to  the  page.  You  can  change  the 
MasterBorder  by  selecting  from  the  drop-down  list. 
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Click  the  Management  tab  to  set  the  following  properties: 
□  B  | 

Page  status:     |  Done 

I     Don't  publish 


User  defined: 
MasterBorder: 


J 


4-  Done.  Page  icon  displays  a  check  mark  when  you  select  Done.  This  is  a 

convenient  way  to  manage  individual  pages  in  a  large  site.  This  setting  has  no 
effect  on  the  functioning  of  the  site. 


♦  Don't  publish.  Makes  it  possible  to  publish  some  pages  while  not  publishing 
others  that  might  be  under  construction  or  private.  The  page  icon  displays  a  red 
indicator  when  you  select  Don't  publish. 

NetObjects  Fusion  removes  pages  marked  Don't  publish  from  the  navigation 
bars  of  other  pages  in  the  site,  disables  manually  created  links  to  such  pages,  and 
does  not  generate  HTML  for  these  pages  during  publishing.  However,  you  can 
preview  a  page  that  is  designated  Don't  publish  as  an  individual  page. 

Do  not  use  the  Don't  publish  setting  in  an  attempt  to  publish  only  changed 
pages  to  an  already-published  site.  Doing  so  causes  broken  links  and  other 
undesirable  results.  Instead,  you  can  publish  a  section  of  the  site  to  update  it.  See 
Chapter  29,  "Publishing  Your  Site." 

♦  Color  code.  You  can  set  the  color  of  page  icons  in  Site  view  to  highlight  a  group  of 
selected  pages  or  pages  that  share  the  same  MasterBorder.  A  page  icon's  color 
has  no  effect  on  the  published  site.  You  can  display  either  a  user-defined  or 
MasterBorder  color  by  opening  the  View  menu,  choosing  Page  Color  Coding, 
and  then  choosing  User  Defined  or  MasterBorder.  You  select  the  colors  to  be 
displayed  on  the  Management  tab  of  the  Properties  palette. 
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On  the  Management  tab  of  the  Properties  palette,  click  the: 

User  defined  Color  button  to  choose  a  color  for  the  currently  selected  page  or 
pages. 

■0-  MasterBorder  Color  button  to  choose  a  color  for  pages  that  have  the  same 
MasterBorder  as  the  currently  selected  page.  This  option  is  not  available  if 
multiple  pages  are  selected. 

For  example,  select  a  page  and  choose  blue  as  the  MasterBorder  color  and  red  as 
the  user-defined  color.  From  the  View  menu,  choose  Page  Color 
Coding> MasterBorder.  The  icons  representing  all  pages  that  share  the 
MasterBorder  of  the  selected  page  turn  blue.  If  you  create  a  new  page  and  assign 
the  same  MasterBorder,  that  page  icon  is  also  blue.  Return  to  the  View  menu 
and  choose  Page  Color  Coding,  User  Defined.  The  icon  of  the  originally  selected 
page  now  turns  red  and  the  other  page  icons  return  to  the  default  color. 

♦  Comments.  Enter  notes  about  the  status  or  content  of  individual  pages.  This 
option  is  not  available  if  multiple  pages  are  selected. 

Setting  Properties  for  a  Group  of  Pages 

When  multiple  pages  are  selected,  you  set  properties  on  the  Selected  Pages  tab  of  the 
Properties  palette.  You  can  change  the  properties  for  all  selected  pages  or  for  a 
single  page. 

1 .   In  Site  view,  select  the  pages  you  want  to  work  with.  See  "Working  with  a  Group 
of  Pages"  on  page  33. 


Property: 

1  MasterBorder 

Property 

|  DefaultMasterBort           Set  on  all  | 

Page  name 

MasterBorder 

Newt  Tour 
Vonder  Lodge 
Activities 

DefaultMasterBorder 
DefaultMasterBorder 
DefaultMasterBorder 
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Setting  Properties 

2.  Choose  a  property  from  the  top  drop-down  list.  You  can  select: 

♦  MasterBorder  to  change  the  MasterBorder  applied  to  the  selected  page  or 
pages. 

♦  Page  name  to  change  the  name  of  the  page  in  Site  view  and  the  default  names 
on  the  page's  banner  and  navigation  button. 

♦  Title  to  change  the  text  displayed  in  the  title  bar  of  the  site  visitor's  browser 
and  bookmark  list. 

♦  Navigation  button  to  change  the  text  displayed  on  the  button  in  the 
navigation  bar  that  links  to  the  selected  page. 

♦  Banner  to  change  the  text  displayed  on  the  selected  page's  banner. 

♦  File  extension.  See  "Using  Custom  Button  and  Banner  Names  and  File 
Extensions"  on  page  43. 

3.  Select  a  property  value  from  the  drop-down  list,  or  type  a  value  into  the  field. 

4.  To  apply  the  new  value  to  all  selected  pages,  click  Set  on  all. 

The  new  value  is  displayed  in  the  list  at  the  bottom  of  the  palette. 

You  can  also  set  Management  properties  for  multiple  pages.  See  "Setting  Site 
Management  Properties"  on  page  36. 


38 


Chapter  3    Creating  and  Managing  Sites 


s  J 

New  Page 


Adding  a  Page 

1.  In  Site  view,  select  the  page  you  want  to  be  the  parent  of  the  new  page. 

2.  Click  the  New  Page  button  on  the  control  bar. 


Home 

Mission 

Events 

Next  Tour 

Contest 

1 

Highlights 


In  Site  view,  the  new  page  appears  beneath  the  selected  page.  The  new  page  is 
named  Untitled  followed  by  a  number,  which  indicates  the  order  in  which  new 
pages  were  added. 

Note:  Site  visitors  may  not  be  able  to  get  to  the  new  page  unless  navigation  is  set 
up  in  the  MasterBorder  of  the  parent  page  to  include  the  child  page.  It  is  also 
a  good  idea  to  set  the  navigation  on  the  child  page  to  include  its  parent  so 
site  visitors  can  get  back  to  the  previous  page. 

Copying  and  Pasting  Pages 

You  can  copy  pages  in  Site  view  and  paste  them  anywhere  in  the  SiteStructure. 

1.  Select  the  page  or  pages  you  want  to  copy  and  press  Ctrl+C. 

2.  Select  the  page  to  be  the  parent  of  the  copied  pages  and  press  Ctrl+V. 
The  copies  are  pasted  into  the  SiteStructure  as  children  of  the  selected  page. 
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Deleting  a  Page 


Deleting  a  Page 

1.  In  Site  view,  select  the  page  or  pages  you  want  to  delete,  right-click  the  page 
icon,  and  choose  Delete  Page  from  the  shortcut  menu. 

2.  Click  Yes  to  confirm  the  deletion. 

If  you  delete  a  page  that  has  children,  the  child  pages  move  up  to  the  level  of  the 
deleted  page. 


Note:  Deleting  a  page  cannot  be  undone.  You  cannot  delete  the  Home  page. 


Moving  a  Page 


When  you  move  pages  in  Site  view,  NetObjects  Fusion  updates  all  affected  links 
within  the  site.  If  you  move  a  page  that  has  children,  the  pages  retain  their 
relationship. 

1.  In  Site  view,  select  the  page  or  section  you  want  to  move.  You  cannot  move  the 
Home  page  or  noncontiguous  pages. 

2.  Drag  the  page  to  the  target  page,  where  it  becomes  a  sibling,  a  child,  or  a  parent 
in  its  new  location. 

As  you  drag  the  page,  a  colored  outline  highlights  the  target  page.  A  triangle  to 
the  left  or  right  of  the  target  page's  border  indicates  the  moved  page  will  be  a 
sibling;  a  triangle  below  the  target  page's  border  indicates  the  moved  page  will 
be  a  child;  and  a  triangle  above  the  target  page's  border  indicates  the  moved 
page  will  be  a  parent. 


Hi! 

hlights 

► 

t  4 

A  triangle  on  the  side  of  the  target  page 
icon  shows  that  the  moved  page  will  be  a 
sibling 


Activities 

iv  Ji 

Highlights 

\  !  / 


A  triangle  on  the  bottom  of  the  target 
page  icon  shows  that  the  moved  page 
will  be  a  child 


A  triangle  above  the  target  page  icon 
shows  that  the  moved  page  will  be  a 
parent 
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If  you  want  to  move  a  page  so  it  will  be  the  child  of  a  page  that  already  has 
children,  target  the  sibling  page. 

You  can  cut  and  paste  to  move  noncontiguous  pages. 

Replacing  the  Home  Page 

You  cannot  move  the  Home  page,  but  you  can  move  a  page  to  be  the  parent  of  the 
Home  page. 

1.  In  Site  view,  select  the  page  you  want  to  become  the  new  Home  page. 

2.  Drag  the  page  to  the  Home  page  until  you  see  the  colored  triangle  above  the 
Home  page. 

When  you  release  the  mouse  button,  the  new  page  becomes  the  parent  of  the  Home 
page. 


Mission 

I  \ 

Events 

Next  Tour 

Contest 

I  J 


Activities 

Highlights 

Events 

Next  Tour 

Contest 

Select  the  Mission  page  and  drag  it 
above  the  Home  page.  The  Mission 
page  becomes  the  new  Home  page. 


Activities 

I 

Highlights 

■ 
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Renaming  Pages 


If  you  move  a  page  that  has  children  to  be  the  parent  of  the  Home  page,  the  Home 
page  becomes  the  sibling  of  the  child  pages. 


Home 

Activities 

^  > 

w 

Mission 

Next  Tour 

Contest 

Highlights 


The  Activities  and  Highlights 
pages  are  children  of  the 
Events  page.  When  you  move 
the  Events  page  into  the  Home 
page  position,  the  children  of 
the  Events  page  become 
siblings  of  the  original  Home 
page. 


Renaming  Pages 

By  default,  NetObjects  Fusion  uses  the  page  name  on  banners  and  navigation 
buttons  that  identify  the  page.  When  you  publish  your  site,  NetObjects  Fusion  uses 
the  page  name  as  the  HTML  file  name  for  the  page.  It  also  uses  the  page  name  when 
it  creates  links  to  the  page. 

NetObjects  Fusion  converts  spaces  and  non-alphanumeric  characters  except 
periods  (.)  and  hyphens  (-)  in  the  page  name  to  underscores  (_)  in  the  HTML  file 
name. 

If  you  give  two  pages  the  same  name  and  they  are  published  in  the  same  folder, 
NetObjects  Fusion  adds  a  numeral  to  the  file  name  when  it  generates  the  HTML 
files  for  the  second  and  any  additional  pages.  For  example,  if  you  have  two  pages 
named  Great,  NetObjects  Fusion  creates  Great.html  and  Great1.html.  This  only 
affects  the  page  names  in  Publish  view. 

You  can  change  the  name  directly  on  the  page  icon  or  in  the  Page  name  field  on  the 
Page  tab  of  the  Properties  palette. 

To  rename  a  page  on  the  page  icon: 

1.  In  Site  view,  click  the  page  name  text  and  type  a  new  name. 

2.  Press  Enter  or  click  outside  the  page  icon  to  enter  the  name. 
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Once  in  this  edit  mode,  you  can  tab  between  sibling  pages  to  edit  their  names. 
NetObjects  Fusion  remains  in  edit  mode  until  you  press  Enter.  If  a  page  has  no 
siblings,  pressing  Tab  moves  the  text  edit  selection  to  the  page's  parent. 

To  rename  a  page  on  the  Properties  palette: 

1.  Select  the  page  you  want  to  rename. 

2.  Edit  the  text  in  the  Page  name  field  on  the  Page  tab  of  the  Properties  palette. 

3.  Press  Tab  or  click  outside  the  palette  to  enter  the  new  name. 

If  several  pages  are  selected,  you  can  change  the  page  name  on  the  Selected  Pages  tab 
of  the  Properties  palette.  See  "Setting  Properties  for  a  Group  of  Pages"  on  page  37. 

Using  Custom  Button  and  Banner  Names  and  File  Extensions 

By  default,  banners  and  navigation  buttons  use  the  page  name.  If  you  prefer,  you 
can  specify  different  names.  If  you  have  a  long  page  name,  you  can  break  it  into  two 
lines. 

To  specify  custom  page  names  in  Site  view: 

1.  Select  the  page  you  want  to  work  with. 

2.  On  the  Page  tab  of  the  Properties  palette,  click  the  Custom  Names  button. 

3.  In  the  Custom  Names  dialog,  type  the  custom  names  you  want  to  use. 


Navigation  button: 
Banner: 


Wonder 
Lodge 


Wonder  Lodge 


File  extension: 


|J  Cancel 


♦  Navigation  button.  Appears  on  navigation  buttons  leading  to  this  page.  To 
add  a  second  line  of  text,  press  Enter  after  the  first  line. 

♦  Banner,  Appears  in  the  page's  banner.  To  add  a  second  line  of  text,  press 
Enter  after  the  first  line. 
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Setting  Up  the  Site  View  Display 


♦  File  extension.  Page  files  usually  have  an  .htm  or  .html  extension.  A  page 
sometimes  requires  a  different  extension  to  function  with  specific  server 
software.  For  example,  pages  for  secure  locations  use  the  extension  .shtml. 

The  extension  you  choose  for  this  page  overrides  the  extension  you  specify 
in  Publish  view.  See  "Setting  Up  to  Publish  Locally"  on  page  450. 

4.  When  you  finish  entering  names,  click  OK. 

You  can  also  rename  buttons  and  banners  in  Page  view  using  the  object's  Properties 
palette.  See  "Change  a  Button's  Name"  on  page  262  and  "Changing  the  Banner 
Text"  on  page  267. 

Setting  Up  the  Site  View  Display 

You  use  options  on  the  View  menu  in  Site  view  to  set  up  your  Site  view  display. 

You  can  change  the  Site  view  orientation  and  background  color  and  color  code  the 
page  icons.  These  settings  are  strictly  for  working  in  Site  view.  They  have  no  effect 
on  the  published  site. 

♦  To  change  orientation,  from  the  View  menu,  choose  Orientation  and  then 
choose  Vertical  or  Horizontal. 

♦  To  change  background  color,  from  the  View  menu,  choose  Background  Color 
and  select  a  new  color  from  the  Color  Picker. 

♦  To  set  up  page  icon  color  codes,  see  "Setting  Site  Management  Properties"  on 
page  36. 

Collapsing  the  SiteStructure  Display 

By  collapsing  the  display  of  the  SiteStructure,  you  hide  the  child  pages  of  a  selected 
page,  displaying  only  the  page  icons  you  want  to  see.  A  page  with  hidden  child  pages 
displays  a  plus  symbol  beneath  its  icon. 
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To  collapse  the  display  of  child  pages,  click  the  triangle  beneath  the  parent's  page 
icon.  To  expand  the  display  to  see  child  pages  again,  click  the  plus  sign. 


Mission 

,  , 

Events 

j 

Next  Tour 

Contest 

Activities  Highligm 


Highlights— 


Click  here  to  expand 
.  the  SiteStructure 

■  Click  here  to  collapse 
the  SiteStructure 


You  can  also  collapse  the  display  by  selecting  a  parent  page  and  pressing  Tab.  To 
expand  the  display,  press  Tab  again. 

The  Structure  and  Outline  views  display  the  same  expanded  and  collapsed  pages.  If 
you  change  the  child  pages  hidden  and  shown  in  one  view,  the  other  view  reflects 
your  changes. 

Working  in  Site  Outline  View 

Site  Outline  view  displays  the  SiteStructure  in  outline  format,  including  a  table  of 
the  properties — child  name,  page  type,  status,  publishing  status,  and  comments — 
of  the  child  pages  of  the  currently  selected  page.  If  the  selected  page  has  no  children, 
the  table  describes  the  selected  page  itself. 

To  switch  to  Outline  view: 


Z)  In  Site  view,  click  the  Outline  tab. 


Click  the  minus  sign 

to  collapse  this   

Structure  Outline 

■B-Q  Home 

Child  Name     Page  Type      Status         Publish     |  Comments 

branch  of  the  site 

This  branch  of  the  site  is 
collapsed.  Click  the  plus 
sign  to  expand  it   

- 
- 

■  n  Mission 
3»0  Events 

I  ^  Activities 

i  n  Highlights 

■  n  Next  Tour 
d»C  Contest 

Mission          Normal           Done  Yes 
Events           Normal           Not  done  Yes 
Next  Tour       Normal           Not  done  Yes 

Contest         Normal           Not  done      No           Prize  details  pending 
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Printing  the  SiteStructure 


Like  SiteStructure  view,  Site  Outline  view  shows  if  a  branch  of  the  site  is  collapsed. 
A  collapsed  branch  is  indicated  by  a  plus  sign  to  the  left  of  the  page  icon;  an 
expanded  branch  is  indicated  by  a  minus  sign. 

♦  To  expand  a  branch,  click  the  plus  sign  to  the  left  of  a  page. 

♦  To  collapse  a  branch,  click  the  minus  sign  to  the  left  of  a  page. 

In  Outline  view  you  can  sort  the  child  pages  by  their  properties  so  you  can  quickly 
identify  pages  with  common  characteristics. 

Z)  Click  the  heading  of  the  column  you  want  to  use  to  sort  the  list. 

NetObjects  Fusion  sorts  the  list  in  ascending  (A-Z)  order.  To  sort  the  list  in 
descending  (Z-A)  order,  point  to  the  column  heading  and  press  Shift+Click. 

Printing  the  SiteStructure 

In  Site  view,  you  use  the  Print  command  on  the  File  menu  to  print  the  SiteStructure 
view  of  your  site  or  of  a  section.  You  cannot  print  the  Site  Outline  view.  The  printed 
structure  shows  the  same  magnification,  colors,  orientation,  and  expanded  or 
collapsed  child  pages  that  you  see  on  the  screen.  The  printout  shows  the  site  name 
in  the  header  and  the  number  of  site  pages  in  the  footer. 

♦  To  print  the  entire  site,  select  the  Home  page,  or  click  All  in  the  Print  dialog. 

♦  To  print  a  specific  page  and  its  children,  select  the  top-level  page  or  a  section,  or 
click  Selected  page  and  its  children  in  the  Print  dialog. 

♦  To  view  what  will  be  printed,  select  Print  Preview  from  the  File  menu.  Select 
Close  to  return  to  Site  view. 

♦  To  fit  a  large  site  on  a  single  page,  from  the  File  menu,  choose  Print  Setup  and 
select  the  Print  to  fit  option  in  the  Print  Setup  dialog. 

Saving  Your  Work 

To  save  your  work,  choose  Save  Site  from  the  File  menu.  NetObjects  Fusion  also  has 
an  auto  save  feature  that  saves  your  work  each  time  you  change  views.  See  "Setting 
Program  Options"  on  page  20. 
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Backing  Up  Your  Site 

You  can  back  up  your  site  manually  or  automatically 

To  make  a  manual  backup: 
1.   From  the  File  menu,  choose  Save  Site  As. 
The  Save  Site  As  dialog  appears. 

Save  in:       |  _i  User  Sites  ^]  JSj   Cj]  \MM\ 

MountainJacques 
MySite 
_J  NewSite 


File  name:       |  |       Save  | 

Save  as  type:  jNetObiects  Site  Files  |*.nod)  ^}  Cancel  j 

2.  Type  a  descriptive  name  for  your  backup  file  and  select  a  location. 

3.  Click  Save. 

NetObjects  Fusion  creates  a  copy  of  the  .nod  file  in  the  location  you  specified  and 
automatically  opens  that  file. 

Note:  The  backup  you  make  with  the  Save  Site  As  command  does  not  collect  all  assets  and 
make  all  links  relative.  Your  backup  will  still  refer  to  assets  and  components  in  the 
original  site  file  folder.  To  make  a  backup  with  assets  and  relative  links,  export  your  site 
file  as  a  template,  as  described  in  Chapter  4,  "Working  with  Templates." 

For  information  on  automatic  site  file  backups,  see  "Setting  Backup  Preferences"  on 
page  52. 
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Setting  Options  for  the  Current  Site 

Site  options  help  you  manage  your  site.  You  can  change  these  settings  from  any 
view.  Changes  take  place  as  soon  as  you  click  OK  to  close  the  Current  Site  Options 
dialog. 

These  options  apply  only  to  the  current  site.  To  set  options  that  apply  to  all  sites,  see 
Chapter  2,  "Setting  Application  Options." 

Changing  General  Settings 

D  From  the  Tools  menu,  choose  Options>Current  Site. 

The  General  tab  of  the  Current  Site  Options  dialog  appears. 


Current  Site  Dpi 


General  j  META  tags  1  History  ]  Backup  1 


Site  name: 
SiteStyle: 
Number  of  pages: 
-Defaults-  


Browser  compatibility 


MtJUHtainJacques 
Phoenix  Teal 


Dynamic  Page  Layout  -  All  browsers 
New  page  si 


(Western  European  [ISO 


lex'  formal! ing 

HTML  <"  Cascading  Style  Sheets  ICSS] 


Gluotetype:  |  Curly  Quotes 


3 


♦  Site  name.  The  name  assigned  to  this  site  when  it  was  created.  You  cannot 
change  this  setting. 

♦  SiteStyle.  The  style  currently  assigned  to  this  site.  To  change  the  SiteStyle,  go  to 
Style  view.  See  Chapter  17,  "Using  SiteStyles." 

♦  Number  of  pages.  Pages  currently  in  this  site.  This  setting  is  updated  when  you 
add  or  delete  pages. 

♦  Browser  compatibility.  HTML  output  method  setting  for  the  site.  See  Chapter  7, 
"Controlling  Published  Output." 
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♦  New  page  size.  Default  width  and  height  for  pages  you  add  to  the  site.  Changing 
this  setting  does  not  change  the  size  of  existing  pages  in  the  site. 

♦  Character  set.  You  can  choose  a  character  set  from  the  drop-down  list.  See 
"Setting  the  Site's  Character  Set"  on  page  485. 

♦  Text  formatting.  You  can  choose  HTML  or  cascading  style  sheets  (CSS).  See 
"Selecting  HTML  or  Cascading  Style  Sheet  Text  Formatting"  on  page  144. 

♦  Quote  type.  Select  Straight  or  Curly  quotes  for  the  site's  text  objects. 

"These  are  Straight  Quotes" 
"These  are  Curly  Quotes" 

♦  HTML  Options.  Click  this  button  to  define  characteristics  of  the  HTML  generated 
when  you  publish  your  site.  See  "Setting  HTML  Options"  on  page  451. 

Entering  META  Tags 

You  can  use  META  tags  to  include  information  about  a  site  within  the  <HEAD>  tag 
of  each  page  in  the  site.  For  example,  you  might  want  to  include  keywords  to 
promote  your  site  with  the  various  search  engines,  the  site  author's  name,  or 
copyright  information.  Site  visitors  do  not  see  information  included  in  a  META  tag. 

When  you  enter  META  tags  on  this  tab,  the  tags  are  inserted  in  the  <HEAD>  tag  of 
every  page  of  your  site.  To  limit  this  information  to  a  specific  page,  you  can  enter 
the  HTML  directly.  See  "Indexing  Pages  for  Search  Engines"  on  page  418. 
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D  From  the  Tools  menu,  choose  Options>Current  Site  and  click  the  META  tags 
tab. 


Current  Site  Dpi  ions 

m 

General    META  tags  j  History  j  Backup  1 

Keywords: 

J 

Author: 

Category  name:  j 
Content: 

OK       |        Cancel  | 

♦  Keywords.  Type  a  series  of  keywords  separated  by  commas.  For  example,  if  your 
site  features  mountain  sports,  you  might  type  words  such  as  skiing,  rock 
climbing,  mountain  biking,  and  so  on.  These  keywords  are  added  to  the  META 
tag  in  each  page's  HTML  file  on  every  page  of  the  site.  Search  engines  use  these 
keywords  to  index  your  site. 

For  example,  if  you  type  skiing,  rock  climbing,  mountain  biking,  the  META  tag 
generated  and  placed  between  the  <HEAD>  and  </HEAD>  tags  of  the  page  is: 
<META  NAME="keywords"  CONTENT="skiing,  rock  climbing,  mountain  biking"> 

♦  Author.  Enter  a  name  to  be  included  in  the  META  tag  in  each  page's  HTML  file 
header.  For  example,  if  you  type  Jesse  Jones,  the  META  tag  generated  and  placed 
between  the  <HEAD>  and  </HEAD>  tags  of  the  page  is:  <META  NAME="author" 
CONTENT="JesseJones"> 

♦  User  defined.  Use  the  Category  name  and  Content  fields  to  enter  standard  META 
NAME  information  that  is  recognized  by  search  engines,  or  to  enter 
information  for  your  own  use. 

The  Category  name  field  is  the  equivalent  of  the  META  tag  NAME  attribute.  For 
example,  if  you  type  copyright  in  the  Category  name  field  and  2001,  Mountain 
Jacques  Inc.  in  the  Content  field,  the  META  tag  generated  and  placed  between 
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the  <HEAD>  and  </HEAD>  tags  of  the  page  is  <META  NAME="copyright" 
CONTENT="2001,  Mountain  Jacques  lnc.">. 

You  can  also  define  your  own  category  and  content.  For  example,  you  could 
enter  content  providers  as  the  Category  name  and  a  list  of  the  colleagues  that 
worked  on  the  site  in  the  Content  field.  This  information  has  no  meaning  for 
the  search  engines,  but  lets  you  track  the  content  providers  for  the  site. 

Viewing  Modification  History 

Z)  From  the  Tools  menu,  choose  Options>Current  Site  and  click  the  History  tab. 


Current  Site  Dpi 


General  |  META  lags    History  j  Backup  I 

Creation  date:  4/2/02  10:17:02  AM 
Last  modified:  4/2/02  10:51:22AM 


Latest 
change: 


Past 

changes: 

I 


J 


Latest  changes  will  appear  at  top  of  log  the 
neKt  time  ^our  site  is  opened. 


♦  Creation  date.  The  date  on  which  the  site  was  created.  You  cannot  edit  this  field. 

♦  Last  modified.  The  last  date  on  which  the  site  was  changed.  You  cannot  edit  this 
field. 

♦  Revision  log.  Enter  comments  into  the  Latest  changes  field  to  keep  a  record  of  site 
modifications.  The  comments  you  type  appear  in  the  Past  changes  field  when 
you  next  open  the  site. 
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Setting  Backup  Preferences 

Z)  From  the  Tools  menu,  choose  Options>Current  Site  and  click  the  Backup  tab. 


Current  Site  Dpi 


General  |  M  ETA  tags)  History    Backup  | 


W  r.ir..  ..i  i.  h  i.  .if, 


Backup  settings- 
Backup  location: 


|CANetOb|ects  Fusion  AUser  SitesVM     Browse.  | 


ivention: 


My  Web  Site-backupl.rrod 

Maximum  number  of  backups  stored:  \4 


♦  Automatic  backup.  This  option  is  selected  by  default.  When  you  close  NetObjects 
Fusion,  the  program  automatically  backs  up  your  .nod  file  and  saves  it  in  the 
\Backups  sub  folder  under  the  \User  S\tes\sitename  folder.  If  you  need  to  use  one  of 
these  backup  files,  copy  it  from  the  \Backups  folder  into  the  \User  Sites\s/fenome 

folder  before  you  open  it  so  the  asset  paths  will  be  correct. 

If  you  do  not  want  NetObjects  Fusion  to  automatically  back  up  your  sites,  clear 
the  check  box. 

♦  Backup  location.  NetObjects  Fusion  saves  backup  files  in  the  \User 
Sites\s/fenome\Backups  folder  by  default.  To  change  the  location  of  the  backup 
files,  type  a  new  path  name  in  the  Backup  location  field,  or  click  Browse  and 
select  a  new  location. 

♦  File  naming  convention.  Select  a  plain  format  or  one  that  includes  the  date  and 
time  from  the  drop-down  list. 

♦  Maximum  number  of  backups  stored.  Indicate  the  number  of  backups  you  want 
NetObjects  Fusion  to  keep.  The  oldest  backups  are  overwritten  as  newer 
backups  are  created.  The  default  is  4  backups;  if  you  have  adequate  disk  space, 
you  can  increase  this  number. 
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Working  with  Templates 

A  template  is  a  predefined  set  of  pages  and  assets  that  you  can  modify  to  meet  your 
needs.  Templates  can  contain  a  single  page,  a  site  section,  or  an  entire  site.  You  can 
edit  a  template,  create  a  new  site  from  a  template,  or  add  a  template  to  an  existing 
site. 

You  can  export  your  NetObjects  Fusion  site  as  a  template  so  you  can  share  your 
work  with  other  NetObjects  Fusion  developers  or  move  your  site  to  another 
computer  system. 

NetObjects  Fusion  7  template  files  are  .zip  files.  Zip  files  provide  a  convenient  way 
to  group  and  compress  files.  Each  template  .zip  file  contains  a  TemplateNamcnft  file 
and  all  the  folders  required  to  build  a  site  based  on  the  template.  Do  not  change  the 
content  of  the  .zip  file.  NetObjects  Fusion  depends  on  the  structure  of  the  file  to  find 
assets  when  opening  the  template.  If  you  try  to  open  a  .zip  file  that  is  not  a 
NetObjects  Fusion  template  file,  you  see  a  message  and  NetObjects  Fusion  does  not 
open  the  file. 

Templates  created  in  earlier  versions  of  NetObjects  Fusion  are  .nft  files.  If  you  have 
templates  created  in  an  earlier  version  of  NetObjects  Fusion,  open  them  in 
NetObjects  Fusion  7  and  export  them  as  templates  to  create  a  template  .zip  file. 

This  chapter  describes: 

♦  Creating  new  sites  from  templates 

♦  Using  templates  to  expand  sites 

♦  Changing  an  existing  template 

♦  Exporting  sites 

♦  Sharing  NetObjects  Fusion  site  files 
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Creating  a  Site  from  a  Template 

You  can  use  templates  that  you  or  your  colleagues  create  and  templates  created  in 
previous  versions  of  NetObjects  Fusion.  See  "Upgrading  Your  Sites"  in  NetObjects 
Fusion  Getting  Started. 

1.   To  create  a  new  site  based  on  a  template,  launch  NetObjects  Fusion  and  from 
the  File  menu  of  any  view,  choose  New  Site>From  Template. 

The  Select  a  Template  File  dialog  appears. 


Select  a  Template  File 


_?jx| 


Look  in:    _sl  Templates 


~zi «-  E  O  EH 


r 


□  pen 


Files  of  type:    |  NetObjects  Fusion  Template  Files  l*.zip;*.nftl  Tl  Cancel  | 


Note:  The  Blank  Site  and  Import  templates  are  in  the  \AutoSites  folder.  Do  not 
delete  or  move  these  templates.  If  these  templates  are  not  available  in  this 
folder,  you  cannot  create  a  new  site  or  import  a  site. 

2.  Navigate  to  the  folder  containing  the  template  you  want,  select  the  appropriate 
TemplateName.zip  file,  and  click  Open. 


Note:  You  can  also  open  .nft  template  files  that  were  created  in  earlier  versions  of 
NetObjects  Fusion. 
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The  Save  Site  As  dialog  appears. 


Jlx| 


3  in:  |  Q  Usi 


H  f  S  1^ 


_|  MountainJacques 
111  MySite 


File  name: 

Save  as  type:  |  NetObjects  Fusion  Files  (K.nod) 


~3 


-Type  a  site  name 
here 


3.  Enter  a  name  for  the  new  site  in  the  File  name  field. 

4.  Select  the  location  where  you  want  to  save  the  site.  By  default,  NetObjects 
Fusion  saves  your  site  in  the  NetObjects  Fusion  7\User  Sites  folder,  but  you  can 
store  it  in  the  location  of  your  choice. 

5.  Click  Save. 

NetObjects  Fusion  opens  in  Site  view  and  displays  the  page  icons  of  the  site  you 
created.  You  can  modify  the  SiteStructure  as  described  in  "Working  with  the 
SiteStructure"  on  page  32. 


Using  Templates  to  Expand  a  Site 

One  way  to  expand  a  site  is  to  insert  NetObjects  Fusion  templates  in  a  specific 
location  in  your  site.  Templates  are  especially  helpful  if  you  have  standard 
boilerplate  sections  or  pages  that  you  want  to  add  to  multiple  sites.  This  is  also  a 
great  way  to  share  with  other  developers  who  use  NetObjects  Fusion.  See 
"Exporting  a  Site"  on  page  57. 

When  you  insert  a  template,  follow  these  guidelines: 

♦  Before  you  insert  the  template,  select  the  location  in  Site  view  where  you  want  to 
add  it.  The  inserted  site,  page,  or  section  becomes  a  child  of  the  selected  page. 
You  can  move  the  pages  once  they  are  inserted. 

♦  All  inserted  pages  take  on  the  SiteStyle  of  the  current  site.  For  example,  if  several 
developers  separately  create  parts  of  a  site,  export  their  work  as  templates,  and 
insert  the  templates  into  a  single  master  site  for  publishing,  the  master  site's 
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SiteStyle  ensures  that  the  compiled  site  has  a  consistent  look  and  feel.  If  you  save 
the  site  as  a  template,  the  SiteStyle  is  saved  as  well.  See  Chapter  17,  "Using 
SiteStyles." 

♦  When  NetObjects  Fusion  inserts  a  template,  if  the  MasterBorder  names 
duplicate  those  already  in  the  site,  it  prefixes  the  template's  MasterBorders  with 
Inserted  and  adds  them  to  the  current  site's  library  of  MasterBorders.  You  can 
rename,  edit,  or  delete  these  extra  MasterBorders.  See  Chapter  10,  "Managing 
MasterBorders." 

♦  Every  template  begins  with  a  single  root  page,  which  is  helpful  if  you  are  adding 
the  template  to  your  site.  However,  if  you  want  the  root  page  of  your  template  to 
be  the  Home  page  of  your  site,  you  must  create  a  new  site  based  on  the  template, 
rather  than  inserting  it. 

To  insert  a  template: 

1.  In  Site  view,  right-click  the  page  under  which  you  want  to  insert  the  template. 
This  page  becomes  the  parent  of  the  inserted  page  or  pages. 

2.  Select  Insert  Template  from  the  shortcut  menu. 
The  Insert  Template  dialog  appears. 


1  Insert  Template 

JLj*l 

Look  in:  |  Q  Templates 

z]  «-  B  Ef  M- 

"  I  AutoSites 


File  name: 

Files  of  type:    |  NetObjects  Fusion  Template  Files  l*.zip;*.nftl  Tl 


3.  Navigate  to  the  template  you  want  to  insert  and  select  the  TemplateName.z\p  file. 


Note:  You  can  also  open  .nft  template  files  that  were  created  in  earlier  versions  of 
NetObjects  Fusion. 

4.   Click  Open. 
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NetObjects  Fusion  inserts  the  template  under  the  page  you  selected.  The  page 
data  is  added  to  the  .nod  file  and  the  assets  are  added  to  the  \Assets  folder  within 
the  site  folder.  The  original  template  is  still  available. 

Exporting  a  Site 

You  can  export  any  site  or  selected  pages  of  a  site  as  a  template.  NetObjects  Fusion 
copies  all  assets  into  the  \Assets  folder  of  the  template  in  the  location  you  select  and 
converts  absolute  paths  to  relative  paths.  NetObjects  Fusion  zips  these  files  and  the 
SiteStyle  files  and  resources  for  any  SiteStyle  in  use  by  the  source  site  into  the 
exported  template.  Exporting  a  site  as  a  template  is  the  only  way  to  share  sites  with 
other  NetObjects  Fusion  developers  or  to  combine  sites.  You  cannot  simply  copy 
the  .nod  file  and  assets  from  one  computer  to  another. 

Before  you  export  a  site  as  a  template,  it  is  a  good  idea  to  verify  the  file  assets  and 
then  delete  unused  assets.  See  "Managing  File  Assets"  on  page  433. 

To  create  a  template: 

1.  In  Site  view,  from  the  File  menu,  choose  Export  as  Template. 

2.  Select: 

♦  Entire  Site  to  include  all  pages  in  the  site  in  the  template. 

♦  Selected  Pages  to  include  only  those  pages  selected  in  Site  view  in  the 
template. 

The  Save  Template  dialog  appears. 

Save  in:  |  Q  Templates  _*J  ^  S3  Cf  H' 

23  AutoSites 


^^^^^^^^^^^^^^^^ 

Save  as  type:  |  NetObjects  Fusion  Template  Files  (".zip] 
V  Include  publish  profiles 
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3.  Type  a  name  for  the  template,  or  accept  the  name  assigned  by  NetObjects 
Fusion. 

4.  Select  the  folder  where  you  want  to  store  the  template. 

5.  If  you  want  the  template  to  include  the  publish  profiles  associated  with  this  site, 
select  Include  publish  profiles. 

Be  aware  that  if  you  select  this  option  and  your  publish  profiles  include  the 
password  to  your  site's  FTP  location,  the  password  will  be  included  in  the 
publish  profiles  saved  with  the  template. 

6.  Click  Save. 

NetObjects  Fusion  creates  the  template  file,  an  \Assets  folder,  and  a  \Styles  folder 
and  zips  them  together  in  a  single  file.  To  transfer  the  template  to  another 
computer,  you  simply  move  the  .zip  file. 

Changing  an  Existing  Template 

You  can  change  or  customize  any  NetObjects  Fusion  template.  For  example: 

♦  You  can  customize  a  standard  company  template  so  it  contains  your 
department  name,  location,  and  personnel  information. 

♦  If  your  company  develops  custom  sites,  you  can  add  your  company  name, 
contact  information,  and  default  links  to  the  templates  you  use  most  often. 

♦  If  you  often  create  new  pages  or  sites  with  the  same  look  and  feel,  you  can  add 
standard  objects  to  the  NetObjects  Fusion  Blank  Site  template. 

To  preserve  the  original  template,  copy  the  template  .zip  file  before  you  edit  or 
modify  a  default  template.  If  you  need  to  undo  changes  to  a  default  NetObjects 
Fusion  template,  you  can  re-install  it. 

Customizing  a  Template 

1.  From  the  File  menu,  choose  New  Site>From  Template. 

2.  In  the  Select  a  Template  File  dialog,  select  the  template  you  want  to  customize 
and  click  Open. 

3.  In  the  Save  Site  As  dialog,  give  the  site  the  same  name  as  the  template.  Do  not 
enter  an  extension. 
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4.  Modify  the  template  page(s)  and  SiteStyle  as  necessary. 

5.  In  Site  view,  from  the  File  menu,  choose  Export  as  Template. 

6.  Choose  the  folder  containing  the  original  template  if  you  want  to  modify  the 
template,  or  choose  another  location  if  you  want  to  preserve  the  original 
template. 

7.  Insert  the  customized  template  in  other  sites  as  needed. 

Sharing  NetObjects  Fusion  Site  Files 

Templates  are  the  only  effective  way  to  share  NetObjects  Fusion  site  files  among 
several  developers  or  across  platforms.  You  cannot  copy  a  Sitename.nod  file  to 
another  computer  and  open  it,  because  the  file  refers  to  files  and  styles  that  are  not 
contained  in  the  Sitename.nod  file  itself. 

To  distribute  or  move  a  NetObjects  Fusion  site: 

1.  Export  the  site  as  a  template  according  to  the  information  in  "Exporting  a  Site" 
on  page  57. 

2.  Copy  the  template  .zip  file  to  the  target  computer  via  network,  diskette,  or  other 
storage  media.  Locate  the  template  so  you  do  not  have  to  move  it  after  you 
create  the  site.  This  ensures  that  the  assets  are  mapped  correctly. 

3.  Start  NetObjects  Fusion  on  the  destination  computer. 

4.  From  the  File  menu,  choose  New  Site>From  Template. 
The  Select  a  Template  File  dialog  appears. 

5.  Open  the  template's  folder,  select  the  TemplateName.zip  file,  and  click  Open. 

6.  In  the  Save  Site  As  dialog,  enter  a  name  for  the  new  site  in  the  File  name  field, 
select  the  location  where  you  want  to  save  the  site,  and  click  Save. 

The  site  that  was  created  in  NetObjects  Fusion  on  the  source  computer  is  now 
the  active  site,  with  its  own  Sitename.nod  file,  on  the  destination  computer. 

If  you  open  a  template  that  uses  a  font  which  is  not  on  your  system,  NetObjects 
Fusion  substitutes  the  browser  proportional  font  specified  on  the  Text  tab  of  the 
Options  dialog.  You  can  still  apply  the  original  font  to  any  new  text  box  in  the  site. 
When  you  open  the  site  on  a  system  that  has  the  original  font,  it  is  restored. 
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Importing  Sites  and 
Documents 

You  can  create  a  site  or  expand  a  site  you  are  working  on  by  importing  a  site  that 
was  created  using  a  different  site  or  page  development  tool.  When  you  import  an 
existing  site,  NetObjects  Fusion  duplicates  the  SiteStructure,  page  content,  and 
links.  It  lays  out  content  in  a  design  as  close  as  possible  to  the  original. 

You  can  also  expand  a  site  by  importing  Microsoft  Word  files.  The  document 
becomes  a  page  in  your  NetObjects  Fusion  site. 

This  chapter  describes: 

♦  Creating  new  sites  from  existing  sites 

♦  Using  existing  sites  to  expand  sites 

♦  Importing  documents 
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Importing  Existing  Sites 

When  you  create  or  expand  a  site  by  using  an  existing  site,  follow  these  guidelines: 

♦  Importing  a  complex  site  requires  processing  time.  If  the  source  site  was  created 
in  NetObjects  Fusion,  it  is  more  efficient  to  import  it  as  a  template. 

♦  You  can  import  an  existing  site  from  a  local  or  networked  drive,  or  from  a 
remote  location  such  as  an  intranet  server  or  the  World  Wide  Web. 

•v-  To  import  from  a  local  drive,  you  must  know  the  drive  and  folder  where  the 
site's  Home  page,  usually  named  index.htm  or  index.html,  is  stored. 

•v-  To  import  from  a  remote  location,  you  must  know  the  URL  to  the  site's  top- 
level  source  page,  such  as  http://www.netobjects.com. 

NetObjects  Fusion  does  not  import  sites  that  are  served  behind  a  proxy 
server,  firewall,  or  virtually  hosted  server.  You  must  download  the  site  to  the 
local  hard  drive  and  then  import  from  the  local  drive. 

■v-  You  can  limit  the  number  of  pages  and  levels  that  NetObjects  Fusion 
captures  from  a  local  or  remote  site.  Levels  are  based  on  the  hierarchy  of 
pages  in  the  source  site,  defined  by  the  site's  navigation;  the  first  level  is 
always  the  site's  Home  page.  The  second  level  consists  of  pages  that  are 
linked  from  the  Home  page.  Third-level  pages  are  linked  from  second-level 
pages,  and  so  on.  NetObjects  Fusion  imports  as  many  pages  as  possible  at  a 
higher  level  before  going  to  a  lower  level. 

•v-  You  must  be  connected  to  the  Internet  or  intranet  to  activate  the  remote 
import. 

♦  When  NetObjects  Fusion  imports  a  site,  it  starts  with  the  page  you  specify  and 
stops  importing  when  it  hits  the  page  number  limit,  the  site  level  limit,  or  the 
end  of  the  site.  If  you  don't  define  import  limits,  NetObjects  Fusion  imports  to 
the  end  of  the  site — no  matter  how  long  that  takes  or  how  much  it  requires  in 
system  resources.  NetObjects  recommends  limits  of  200  pages  and  20  levels. 

♦  When  you  create  a  new  site  from  an  imported  site,  NetObjects  Fusion  applies 
the  ZeroMargins  MasterBorder.  If  you  expand  a  site  by  importing  a  section,  you 
can  apply  any  MasterBorder  already  in  the  site.  If  you  import  a  NetObjects 
Fusion  MX  or  NetObjects  Fusion  7  site,  the  MasterBorders  in  the  original  site 
are  preserved. 
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♦  HTML  coding  practices  vary,  so  the  contents  of  the  source  site  pages  are 
unpredictable.  Spaces  in  .html  file  names  cause  import  problems. 

♦  NetObjects  Fusion  does  not  import  server-side  imagemaps  or  manage  server- 
side  resources.  If  the  imported  site  originally  used  server  resources  such  as 
JavaScripts,  CGI  scripts,  or  server-side  includes,  you  must  manually  recreate 
these  on  your  server.  If  a  page  contains  too  much  script,  you  can  reference  the 
HTML.  See  Chapter  23,  "Referencing  and  Editing  External  HTML." 

♦  NetObjects  Fusion  imports  all  HTML  tables  in  the  site. 

♦  NetObjects  Fusion's  import  feature  supports  most  of  the  HTML  3.2 
specification.  Cascading  style  sheet  coding  is  removed  from  pages  during 
import.  Content  with  no  other  alignment  formatting  is  placed  flush  left  on  its 
page. 

♦  When  you  import  a  site  that  was  built  using  HTML  frames,  NetObjects  Fusion 
imports  the  frameset's  content  pages  as  regular  pages,  and  references  the 
original  frameset  page  as  an  external  HTML  page. 

Sites  created  in  NetObjects  Fusion  MX  or  NetObjects  Fusion  7  generally  import 
with  few  problems,  but  you  should  be  prepared  to  clean  up  an  imported  site  created 
from  another  source.  Adjust  font  sizes  and  styles  as  needed,  and  add  NetObjects 
Fusion  navigation  bars  and  banners  as  appropriate  to  your  design.  If  a  page  does 
not  import  the  way  you  expect,  check  the  original  source  file  for  incorrect  or 
nonstandard  HTML  code. 
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Creating  a  New  Site  from  an  Existing  Site 


1.   From  the  File  menu,  choose  New  Site>From  Existing  Web  Site. 
The  Import  Web  Site  dialog  appears. 


t*  Local  [on  tl  puter  or  nel  >orl      f~  Remote  (on  the  Internet) 


Home  page: 
Options 


Assign  MasterBorder:  (ZeroMargins 


3 


When  importing  a  site  to  add  to 
the  current  site,  you  can  assign 
a  MasterBorder 


[~~  Down  to  structural  level. 


I-  Limit  number  of  pages  to. 


Domain  name: 


.domain.com 


(This  is  needed  for  managing  links) 


Cancel 


2.  Select  Local  or  Remote  import. 

3.  Enter  the  exact  file  location  and  path  to  the  top-level  page  you  want  to  import: 

♦  To  specify  a  local  site,  enter  the  full  drive  and  path  to  the  local  site's  top-level 
source  page  in  the  Home  page  field,  or  click  Browse,  select  the  appropriate 
top-level  page,  and  click  OK. 

♦  To  specify  a  remote  site,  enter  the  full  URL  to  the  site's  top-level  source  page 
in  the  Home  page  field.  To  ensure  accuracy,  navigate  to  the  site  or  page 
using  your  browser,  then  copy  and  paste  the  URL  from  the  browser. 

The  starting  page  of  your  site  import  does  not  have  to  be  the  source  site's  Home 
page,  usually  named  index.htm  or  index.html;  it  can  be  any  page  of  any  accessible 
Internet  or  intranet  site.  You  must  have  full  access  to  this  page  and  the  other 
pages  in  the  site  through  HTTP  1.0.  If  you  do  not  have  HTTP  1.0  connectivity 
or  there  are  other  security  measures  such  as  robots.txt  or  ht.access  files,  virtual 
hosting,  or  a  firewall,  you  must  download  the  site  to  your  local  hard  disk  via  an 
FTP  connection  and  then  select  Local  import.  This  also  applies  if  you  have  a 
virtual  domain,  because  virtual  domains  require  HTTP  1.1. 

4.  Set  the  limits  for  the  number  of  pages  and  number  of  levels  you  want  to  apply  to 
the  import  process.  NetObjects  recommends  limits  of  200  pages  and  20  levels. 
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5.  If  you  are  importing  a  local  site,  enter  the  domain  name  for  the  site's  Home  page 
in  the  Domain  name  field.  If  the  local  site  was  ever  published  on  the  Web,  use 
the  domain  name  that  was  used  to  access  it;  if  not,  leave  the  placeholder 
www.domain.com  in  the  field. 

When  it  imports  a  local  site,  NetObjects  Fusion  needs  to  know  the  "home  base" 
domain  of  that  site,  so  it  can  tell  whether  to  convert  any  absolute  links  it  finds 
into  external  or  internal  links.  It  does  that  by  comparing  the  targeted  domain,  if 
there  is  one,  to  the  domain  name  you  enter. 

If  you  are  importing  a  remote  site,  make  sure  your  system  is  connected  to  the 
Internet  or  intranet  so  NetObjects  Fusion  can  link  to  and  import  the  site. 

6.  Click  OK. 

The  Save  Site  As  dialog  appears. 

7.  Enter  a  name  for  the  new  site  in  the  File  name  field. 

8.  Select  the  location  where  you  want  to  save  the  site.  By  default,  NetObjects 
Fusion  saves  the  site  in  the  NetObjects  Fusion  7\User  Sites  folder,  but  you  can  store 
it  in  the  location  of  your  choice. 

9.  Click  Save. 

NetObjects  Fusion  imports  the  site  and  converts  its  content,  structure,  and  links 
into  NetObjects  Fusion  format.  If  you  import  a  site  created  with  NetObjects 
Fusion,  the  MasterBorders  are  imported  with  the  site.  For  a  remote  import,  it 
stores  the  site's  assets  and  all  original  HTML  files  in  the  \S/'fencjme\lmport  folder, 
and  assigns  the  ZeroMargins  MasterBorder  to  each  page  in  the  new  site.  If  you 
are  importing  a  site  to  expand  an  existing  site,  you  can  choose  a  MasterBorder 
from  the  Assign  MasterBorder  drop-down  list. 

10.  Navigate  to  each  page  and  make  necessary  adjustments. 
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Using  an  Existing  Site  to  Expand  a  Site 

1.  In  Site  view,  select  the  page  you  want  to  use  as  the  parent  of  the  imported 
content. 

2.  From  the  File  menu,  choose  Import>Web  Site. 

3.  Follow  the  steps  in  "Creating  a  New  Site  from  an  Existing  Site"  on  page  64. 

When  you  use  a  site  to  expand  a  site,  you  can  also  select  a  MasterBorder  for  the 
imported  section.  From  the  Assign  MasterBorder  drop-down  list,  select  the 
MasterBorder  you  want  to  apply  to  the  imported  site  or  section. 

Importing  a  Microsoft  Office  Document 

If  Word  97,  Word  2000,  or  Word  version  2002  is  installed  on  your  system,  you  can 
import  documents  in  Microsoft  Word,  Word  for  Macintosh,  and  .rtf  formats. 

When  you  import  a  Microsoft  Office  document,  the  imported  document  becomes  a 
page  in  your  NetObjects  Fusion  site.  Once  imported,  you  can  change  the  design  and 
layout  of  the  page  in  NetObjects  Fusion.  In  this  method  of  importing,  there  is  no 
connection  between  the  new  pages  and  the  original  document.  If  you  update  the 
document,  there  is  no  corresponding  change  in  the  content  of  the  NetObjects 
Fusion  pages. 

If  you  are  going  to  import  a  very  long  document,  for  example  a  40-page  report,  it  is 
a  good  idea  to  split  it  into  smaller  documents  to  ensure  that  you  do  not  exceed  the 
NetObjects  Fusion  limit  for  a  Layout. 

If  it  is  important  for  you  to  maintain  a  link  to  the  original  document,  you  can 
publish  an  HTML  version  of  the  document  at  the  time  you  publish  the  site.  See 
"Creating  a  File  Link"  on  page  281. 

1.  In  Site  view,  select  the  page  you  want  to  use  as  the  parent  of  the  imported 
document. 

2.  From  the  File  menu,  choose  Import>Document. 
The  Import  Document  dialog  appears. 
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3.   Choose  the  appropriate  file  type  from  the  Files  of  type  drop-down  list,  and 
navigate  to  the  document  you  want  to  import. 


Import  Document 


Look  in;  |  Q  Tutorial 


2D  AdBanners 
ZD  HTML 
2D  Sounds 


1]  Mission,  doc 


Assign  MasterBorder:  | ZeroMargins 


J?]*] 


"3  *=  s  cj  & 


File  name: 

jActivities.doc 

□  pen  j 

Files  of  type: 

|  Microsoft  Word  (*.doc) 

d 

Cancel 

3 


4.  Select  a  MasterBorder  to  apply  to  the  new  pages  from  the  Assign  MasterBorder 
drop-down  list. 

5.  Click  Open. 

The  file  is  imported  into  the  site  and  placed  as  a  child  page  below  the  selected 
page  in  Site  view. 


Note:  You  can  also  import  a  document  from  Page  view.  See  "Importing  Pages"  on 
page  78. 
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Page  View  Basics 

Page  view  is  where  you  add  text,  graphics,  and  other  objects  to  develop  page  design 
and  add  content.  You  can  use  a  variety  of  tools,  object  properties,  and  layout  aids, 
such  as  rulers,  guides,  and  grids,  to  add  and  arrange  objects  on  the  page. 

This  chapter  describes: 

♦  MasterBorder  and  Layout  area 

♦  Setting  up  the  Page  view  display 

♦  Displaying  pages  in  Page  view 

♦  Setting  page  size 

♦  Adding  objects  to  the  page 

♦  Editing  objects 

♦  Positioning  objects 

♦  Layering  objects 
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Exploring  Page  View 


Page  name  ■ 


NetObjects  Fusion  -  MountainJacques.nod 


File    Edit    View    bo    Object    Text    Tools  Help 

#; 


 [a  *  a  & 


You  use  the  tabs  between  the  control  bar  and  horizontal  ruler  to  see  different  views 
of  the  page.  Use: 

♦  Page  Design  view  to  add  objects  to  the  page. 

♦  HTML  Source  view  to  look  at  and  edit  the  page's  HTML  code.  See  "Editing  the 
Page's  HTML"  on  page  410. 

♦  Page  Preview  to  view  the  current  page  in  Microsoft  Internet  Explorer. 
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MasterBorder  and  Layout  Area 


In  NetObjects  Fusion,  a  page  consists  of  a  Layout  area  and  a  MasterBorder  area.  The 
Layout  area  is  the  body  of  the  page.  It  contains  objects  that  are  unique  to  that  page. 
The  MasterBorder  is  the  page  margins.  MasterBorders  contain  objects,  such  as 
navigation  bars,  that  appear  on  multiple  pages. 

You  can  define  multiple  Layouts  and  MasterBorders,  then  assign  one  of  each  to  a 
page.  See  "Working  with  MasterBorders"  on  page  124  and  "Working  with  Layouts" 
on  page  104. 


Use  the  Palette  Launcher  buttons  in  the  lower  left  corner  of  the  NetObjects  Fusion 
window  to  open  and  close  the  Properties  palette,  Site  Navigation  palette,  and  Object 
Tree  palette.  See  "NetObjects  Fusion  Window"  on  page  9,  "Using  the  Site 
Navigation  Palette"  on  page  73,  and  "Using  the  Object  Tree  Palette"  on  page  81. 


Use  the  commands  on  the  View  menu  to  show  or  hide  Page  Design  view  elements. 

♦  Show  and  hide  palettes  and  toolbars  as  described  in  "NetObjects  Fusion 
Window"  on  page  9. 

♦  Use  the  MasterBorder  command  to  hide  the  MasterBorder.  This  provides  more 
onscreen  area  for  you  to  work  on  the  page  Layout. 

♦  Use  the  Page  Labels  command  to  show  and  hide  the  Layout  and  MasterBorder 
labels  and  margin  lines. 

♦  Display  object  outlines  to  help  you  control  object  size  and  position. 

♦  Use  the  Object  Icons  command  to  display  or  hide  the  indicator  icons. 
■❖•  Link  icon  indicates  the  object  has  an  associated  link. 

■v-  Anchor  icon  indicates  the  object  has  an  anchor  point  to  which  you  can  link, 
-v-  Script  icon  indicates  the  object  has  associated  HTML  or  scripts. 


Setting  Up  the  Page  Design  View  Display 


Properties  palette 
Site  Navigation  palette 
Object  Tree  palette 
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Q  -O-  HTML  tag  icon  indicates  the  text  has  an  HTML  tag  inserted  at  this  point. 

Q  0-  Embedded  object  icon  indicates  the  embedded  object's  insertion  point. 

0-  Action  icon  indicates  an  action  is  associated  with  the  object. 

^  0-  Warning  icon  indicates  a  potential  layout  problem  or  other  error  condition. 

A  ScreenTip  identifies  the  problem.  You  cannot  hide  this  icon. 
1  <0>  Question  mark  icon  indicates  an  empty  navigation  bar.  You  cannot  hide  this 

icon. 

♦  Select  Rulers  &  Guides  from  the  View  menu  to  show  and  hide  rulers  and  guides. 

♦  Select  Grid  from  the  View  menu  to  show  and  hide  grids. 

Setting  Page  Properties 

To  display  the  Page  Properties  palette,  from  the  View  menu,  select  Page  View 
Options  and  click  the  Page  tab.  See  "Setting  Page  Properties"  on  page  35. 

Displaying  Pages  in  Page  View 

You  can  display  a  page  from  Site  view,  or  move  between  pages  in  Page  view  using 
the  Site  Navigation  palette  or  the  Go  To  command  on  the  Go  menu.  For 
information  about  the  Go  To  command,  see  "Using  the  Go  Menu"  on  page  12. 

Displaying  a  Page  from  Site  View 

From  Site  view,  to  display  a  page  in  Page  view: 

♦  Click  the  page  icon,  then  click  the  Page  button  on  the  control  bar. 

♦  Double-click  the  page  icon. 

Page  view  ♦  Click  the  page  icon,  then  from  the  Go  menu,  choose  Page. 
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Using  the  Site  Navigation  Palette 

The  Site  Navigation  palette  displays  the  SiteStructure. 
1 .   In  Page  view,  click  the  Site  Navigation  palette  button. 
Site  Navigation  palette  The  Site  Navigation  palette  appears. 


|site  Navigation  FFF 

-  ~  Home 

■™  Mission 

3  -  ^  Events 

i  ^  Activities 

1  □  Highlights 

■■■■{^  Next  Tour 

3  n  Contest 

;  ^  Wonder  Lodge 

2.   Double-click  the  page  you  want  to  open. 

NetObjects  Fusion  displays  the  page  you  select. 

Setting  Page  Size 

The  size  of  a  NetObjects  Fusion  page  is  defined  by  the  combined  size  of  the 
MasterBorder  and  Layout  area.  The  default  page  size  is  730x555  pixels.  You  can 
redefine  the  default  page  size  on  the  General  tab  of  the  Current  Site  Options  dialog. 
See  "Changing  General  Settings"  on  page  48. 

You  can  change  the  size  of  an  individual  page  by  adjusting  the  size  of  the 
MasterBorder  area,  the  Layout  area,  or  both. 
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MasterBorder 
handles 


Layout  Width 
and  Height  fields 


Layout  area 
handle 

MasterBorder 
handle 


To  resize  the  Layout  and  MasterBorder  areas: 

With  the  rulers  showing,  drag  a  Layout  or  MasterBorder  handle  to  change  the  area's 
height  and/or  width.  Use  the  far  right  MasterBorder  handle  to  change  the  size  of  the 
right  MasterBorder  and  the  bottom  MasterBorder  handle  to  change  the  size  of  the 
bottom  MasterBorder. 

To  set  Layout  size  precisely,  enter  values  in  the  Layout  Width  and  Height  fields  on 
the  General  tab  of  the  Layout  Properties  palette.  For  precision  MasterBorders,  enter 
values  for  the  left,  right,  top,  and  bottom  margins  on  the  General  tab  of  the 
MasterBorders  Properties  palette. 

You  cannot  make  a  Layout  or  MasterBorder  smaller  than  the  objects  it  contains. 
You  cannot  lock  the  size  of  a  Layout  or  MasterBorder.  If  you  add  an  object  that  is 
larger  than  the  Layout  or  MasterBorder,  the  area  expands  to  accommodate  the 
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object.  If  you  are  working  with  Windows  95,  98,  or  ME,  the  upper  limit  for  a  Layout 
area  is  33,000  pixels  by  33,000  pixels. 

Adding  Objects  to  the  Page 

You  can  use  the  tools  on  the  toolbars,  or  drag  and  drop  files  onto  the  page  to  place 
objects. 

Using  Object  Tools 

1 .  In  Page  view,  select  the  tool  you  want  to  use. 

2.  Draw  a  box  to  position  the  object. 

For  some  objects,  you  must  select  a  file  from  the  Open  dialog. 

The  object  appears  on  the  page  with  the  appropriate  properties  palette.  The 
options  displayed  on  the  properties  palette  vary  depending  on  the  object. 

3.  Set  the  object  properties. 

After  you  use  a  selected  tool  to  place  an  object  on  the  page,  the  Selection  tool 
automatically  becomes  active.  To  use  a  tool  repeatedly  to  add  several  objects, 
double-click  it  to  keep  it  active.  This  does  not  work  for  the  Form  area  tool  or  the 
Component  tools. 

Page  View  Toolbars 

Page  view  includes  Standard,  Advanced,  Component,  and  Form  toolbars.  Internal 
Page  components  are  on  the  NetObjects  Fusion  Components  toolbar.  If  you  install 
third-party  Page  components,  associated  toolbars  are  listed  on  the  View,  Toolbars, 
Component  Tools  menu.  For  general  information  about  using  toolbars,  see  "About 
Toolbars"  on  page  11. 
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Standard  Toolbar 


A 


□ 


■  Selection  tool 
See  Chapter  1 


Text  tool 

See  Chapter  12 


Link  tool 

See  Chapter  79 


.  Draw  Shape  tools 
See  Chapter  16 


■  Span  tool 
See  Chapter  72 


Zoom  tools 
See  Chapter  7 


Picture  tool 
See  Chapter  13 

Anchor  tool 
See  Chapter  19 

.  Hotspot  tools 

See  Chapter  19 

  Container  tools 

See  Chapter  15 
.  Form  area  tool  and  Chapter  8 

See  Chapter  24 

  Navigation  tools 

See  Chapter  18 


Line  tools 
See  Chapter  16 


Form  Toolbar 


  Forms  Button  tool 

See  Chapter  24 

H    |  '   Check  Box  tool 

See  Chapter  24 

©    |   Radio  Button  tool 

See  Chapter  24 

  Edit  Field  tool 

See  Chapter  24 

[TTTT1    |   Multi-line  tool 

See  Chapter  24 

n    Forms  Combo  Box  tool 

See  Chapter  24 
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Advanced  Toolbar 


EH 

m 


Services  tool 
See  Chapter  6 

  Photo  Gallery  tool 

See  Chapter  14 

Dynamic  Media  tool 
See  Chapter  20 

  Digital  Video  tool 

See  Chapter  20 


Web  Applications  tool 
See  Chapter  2  7 

  Plugin  tools 

See  Chapter  20 

Data  List  tool 
See  Chapter  26 

  HTML  tool 

See  Chapter  19 

-  External  HTML  tool 
See  Chapter  23 


NetObjects  Fusion  Components  Toolbar 


m 

■a 

EEB 


DynaButton  tool 
See  Chapter  25 


Ad  Banner  tool 
See  Chapter  25 


Picture  Loader  tool 


Form  Handler  tool  See  Chapter  25 
See  Chapter  24 


Picture  Rollover  tool 
See  Chapter  25 


Screen  Door  tool 
See  Chapter  25 


Ticker  Tape  tool 
See  Chapter  25 


Go  Menu  tool 
See  Chapter  25 


Rotating  Picture  tool 
See  Chapter  25 


Site  Mapper  tool 
See  Chapter  25 


Time  Based  Picture  tool 
See  Chapter  25 
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Dragging  and  Dropping  Objects 

1.  In  Windows  Explorer,  select  the  file  you  want  to  place. 

You  can  drag  and  drop  any  file  you  can  place  with  an  object  tool. 

2.  Drag  the  file  into  the  NetObjects  Fusion  window  and  drop  it  on  the  page. 

3.  Set  the  object's  properties. 

Importing  Pages 

In  Page  view,  you  can  import  a  page  authored  elsewhere,  convert  it  to  NetObjects 
Fusion  format,  and  edit  its  contents  as  you  would  any  other  page.  You  can  import 
files  with  .htm,  .html,  .jsp,  .rtf,  or  .txt  extensions,  or  files  created  in  Microsoft  Word 
97,  Word  2000,  or  Word  version  2002. 

If  you  prefer  not  to  convert  an  HTML  page  to  NetObjects  Fusion  format,  you  can 
place  it  as  an  object.  See  "Referencing  HTML  from  Page  View"  on  page  344. 


Note:  Because  of  variations  in  HTML  code,  not  all  pages  import  exactly  as  you  see  them. 
Unpredictable  results  can  occur  if  the  page  contains  incorrect  HTML.  Non-HTML,  such 
as  JavaScripts  and  CGI  scripts,  does  not  import.  If  NetObjects  Fusion  cannot  parse  the 
HTML,  it  is  imported,  but  appears  as  external  HTML. 

1.  In  Page  view,  display  the  Layout  on  which  you  want  to  import  the  page. 

It  is  easiest  to  import  a  page  into  a  Layout  that  contains  no  content,  because 
objects  from  the  imported  file  will  overlay  existing  objects. 

2.  From  the  File  menu,  choose  Import>HTML  Page  or  Import>Document.  If  you 
do  not  have  a  supported  version  of  Word  installed  on  your  system, 
Import>Document  is  not  available. 

The  File  Open  or  Import  Document  dialog  appears. 

3.  Select  the  type  of  file  you  want  to  import  from  the  Files  of  type  list. 

4.  Select  a  file  from  your  hard  disk  or  LAN.  To  use  a  file  on  a  CD-ROM,  copy  it  to 
your  hard  disk.  To  reuse  an  HTML  file  already  included  in  the  site,  select  it  from 
the  HTML  Assets  tab. 

5.  Click  Open. 

NetObjects  Fusion  places  the  contents  of  the  file  on  the  current  page,  beginning 
in  the  upper  left  corner  of  the  Layout  area. 
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You  can  also  import  a  document  from  Site  view.  See  "Importing  a  Microsoft  Office 
Document"  on  page  66. 

Reusing  Assets 

By  treating  object  files  as  assets,  NetObjects  Fusion  provides  you  with  a  convenient 
way  to  replace  or  update  multiple  instances  of  an  object.  Reusing  assets  can  also 
reduce  the  number  of  files  stored  on  the  server.  Instead  of  adding  multiple  copies  of 
a  file  in  several  locations,  you  add  the  asset  once  and  then  select  from  the  list  of 
existing  assets  when  you  want  to  place  another  instance  of  the  asset. 

To  place  an  asset: 

1.  In  Page  view,  choose  the  appropriate  tool  and  draw  a  box  to  specify  where  you 
want  to  place  the  asset. 

The  File  Open  dialog  appears. 

2.  Click  the  Assets  tab  to  see  a  list  of  current  assets. 


Show  thumbnail 
image  check  box  for 
picture  asset  


Picture  File  Open 


Folder    Image  Assets  | 


Name 


mMcormick 
moreinfo 

rnountainjacques 


|  File  Na 


rnMcorrnick.gif 

moreinfo.gif 

rnountainjacques.gif 

mtbikesm.gif 

rnWard.gif 

nepal.gif 

orienting.jpg 

rConnelly.gif 

rockclirnbersrn.giS 
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File  Path:       |  C:\NetObjects  Fusion  7\User  Sites\NewSiteV\s 


□  pen 


J 


_Ux| 


W  Show  thumbnail  image 


3.   Select  the  asset  you  want  to  place  and  click  Open. 

NetObjects  Fusion  places  the  asset  on  the  page  and  opens  the  appropriate 
properties  palette.  In  Assets  view,  you  can  replace  all  instances  of  this  asset  in  your 
site  using  a  single  command,  or  add  file  assets.  See  Chapter  28,  "Managing  Assets." 
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Adding  and  Modifying  Alt  Tags 

To  make  pages  load  faster,  some  visitors  set  up  their  browsers  so  they  do  not  display 
images.  To  ensure  that  your  pages  provide  the  information  you  want  to  convey 
regardless  of  how  the  site  visitor's  browser  is  set  up,  use  alt  tags  to  provide 
descriptive  text  that  appears  when  images  are  not  displayed.  You  can  add  an  alt  tag 
to  image,  Java,  drawn  shape,  generic  plugin,  QuickTime,  Shockwave,  audio,  and 
video  objects  in  the  AltTag  field  of  the  properties  palette. 

Microsoft  Internet  Explorer  4.x  and  greater  and  Netscape  Navigator  4.x  display  alt 
tag  text  in  a  ScreenTip  when  site  visitors  point  at  an  object,  so  make  sure  every  alt 
tag  is  appropriate  for  a  ScreenTip. 


File:     |Tutori5!«wobir-.-?rs.ipg  Browse... 


Displ  ay 


t*  Normal 
C  Stretch 
C  Tile 


|     Show  hotspots 
Link...  Anchor... 


Alt  Tag  field 


To  add  or  modify  an  alt  tag: 

Z>  On  the  object's  Properties  palette,  type  a  descriptive  name  in  the  AltTag  field. 


Editing  Objects  and  Assets 

You  can  edit  objects  created  in  other  software  applications  from  within  NetObjects 
Fusion.  In  Page  view,  right-click  the  object  and  select  Open  File  In  External  Editor 
from  the  shortcut  menu.  In  Assets  view,  you  select  the  Asset,  and  then  from  the 
Asset  menu,  select  Open  File  in  External  Editor.  If  the  correct  application  does  not 
open,  the  file  type  of  the  object  or  asset  is  probably  not  associated  with  the  correct 
application.  You  can  set  external  file  editors  for  .html,  .gif,  and  .jpg  files  on  the 
Program  tab  of  the  Options  dialog.  See  "Setting  Program  Options"  on  page  20. 
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Selecting  an  Object 

In  NetObjects  Fusion  you  might  not  always  be  aware  of  making  a  selection,  but  in 
Page  view  something  is  always  selected.  For  example,  when  you  switch  from  Site 
view  to  Page  view,  the  Layout  Properties  palette  appears.  You  might  not  see 
evidence  that  the  Layout  is  selected,  but  it  is  indicated  by  the  properties  palette.  To 
find  out  what  is  selected  at  any  time,  check  the  properties  palette. 

Using  the  Selection  Tool 

Z)  Click  the  Selection  tool  on  the  Standard  toolbar. 

■0-  Click  an  object  to  select  it.  Click  elsewhere  to  deselect  it. 

■v-  Drag  a  marquee  around  multiple  objects,  or  Shift+Click  each  object  you 
want  to  select.  Shift+Click  selected  objects  one-by-one  to  deselect  them. 

Using  the  Object  Tree  Palette 

The  Object  Tree  palette  provides  a  convenient  way  to  select  objects,  especially  if  you 
are  working  with  layered  or  hidden  objects. 

1.  In  Page  view,  click  the  Object  Tree  palette  button  in  the  lower  left  corner. 
Object  Tree  palette  The  Object  Tree  palette  appears. 

2.  Click  an  object  in  the  Object  Tree  palette  to  locate  it  on  the  page. 
Selection  handles  appear  around  the  object  on  the  page. 


Selection  tool 
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Positioning  Objects 

Renaming  an  Object 

If  you  add  several  of  the  same  type  of  objects  to  a  Layout  or  MasterBorder, 
NetObjects  Fusion  numbers  each  object  in  the  order  in  which  you  placed  it.  You 
can  rename  the  objects  for  easy  identification.  These  names  are  only  for  use  by 
NetObjects  Fusion;  they  do  not  affect  the  final  Web  site. 

1.  In  Page  view,  click  the  Object  Tree  palette  button  in  the  lower  left  corner. 
The  Object  Tree  palette  appears. 

2.  Select  the  name  of  the  object,  then  click  again  and  type  a  new  name.  Some 
objects  cannot  be  renamed. 

Resizing  an  Object 

Z>  Click  an  object  and  drag  the  selection  handles  to  resize  the  object.  If  the  Display 
property  of  a  Picture  is  set  to  Normal,  you  cannot  make  the  image  larger. 

To  make  multiple  objects  the  same  size: 

1.  In  Page  view,  select  the  objects  by  Shift+  Clicking  each  one  or  by  drawing  a 
marquee  around  them. 

2.  From  the  Object  menu,  choose  Size  Objects: 

♦  Width,  to  make  the  objects  the  same  width. 

♦  Height,  to  make  the  objects  the  same  height. 
The  selected  objects  size  to  match  the  largest  object  you  select. 

Positioning  Objects 

Moving  or  Copying  an  Object 

♦  Click  and  drag  an  object  to  move  it. 

♦  Press  Ctrl,  then  click  and  drag  an  object  to  copy  it. 

♦  To  prevent  an  object  from  dropping  into  a  container,  such  as  a  Layout  Region 
or  text  box,  select  the  object  and  press  Alt  while  moving  it  over  a  container. 

♦  You  can  move  or  copy  objects  from  Layout  to  Layout  in  Page  view  using  the 
Cut,  Copy,  and  Paste  commands  on  the  Edit  menu. 


Object  Tree  palette 
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To  specify  the  position  of  an  object  before  you  paste  it,  click  the  page  and  then 
use  the  Paste  command.  The  upper-left  corner  of  the  pasted  object  appears  at 
the  point  where  you  click  the  page. 

Aligning  and  Distributing  Objects 

In  a  Layout  or  Layout  Region,  you  can  align  two  or  more  objects  to  each  other  and 
distribute  three  or  more  objects  equidistant  from  each  other.  You  can  also  align  and 
distribute  objects  relative  to  the  Layout  or  Layout  Region. 

1.   In  Page  view,  select  the  objects  you  want  to  align  by  Shift+ Clicking  each  one  or 
by  drawing  a  marquee  around  objects  in  the  Layout. 

If  you  select  different  types  of  objects,  the  Multi-Object  Palette  appears.  If  the 
object  properties  appear,  click  the  Position  tab. 


Multi-Object  Properties 
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2.  If  you  want  the  objects  to  align  or  be  distributed  relative  to  the  Layout  or  Layout 
Region  in  which  the  objects  are  placed,  select  Relative  to  Layout. 

3.  In  the  Align  section,  specify  the  horizontal  and  vertical  alignment. 

When  aligning  objects,  NetObjects  Fusion  uses  the  object  furthest  in  the 
direction  you  specify  as  the  reference  point.  For  example,  if  aligning  left,  the 
leftmost  object  is  used;  the  topmost  object  is  used  when  aligning  top.  When 
centering  objects,  NetObjects  Fusion  chooses  the  average  distance  between  the 
selected  objects  as  the  center  point. 

♦  Select  an  option  from  the  Horizontally  section  to  align  objects'  left  or  right 
sides,  or  to  center  them.  If  you  select  Relative  to  Layout,  the  objects  align  to 
the  right  or  left  side  of  the  Layout,  or  are  centered  in  the  Layout,  one  on  top 
of  the  other. 
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On  the  left,  the  objects 
are  aligned  horizontally 
to  the  left;  on  the  right, 
the  objects  are  aligned 
the  same  way  relative  to 
the  Layout 


♦  Select  an  option  from  the  Vertically  section  to  align  objects'  top  or  bottom 
sides,  or  to  center  them.  If  you  select  Relative  to  Layout,  the  objects  align  to 
the  top  or  bottom  of  the  Layout,  or  are  centered  in  the  Layout  side-by-side. 

♦  Select  Horizontally  or  Vertically  from  the  Distribute  section  to  make 
selected  objects  equidistant. 


Note:  Object  alignment  can  have  an  impact  on  preserving  your  design  and  optimizing  your 
code.  See  "Optimizing  Dynamic  Page  Layout  Output"  on  page  95. 

Adding,  Moving,  and  Deleting  Guides 

Use  the  page  guides  to  align  objects  vertically  and  horizontally.  You  can  add  as 
many  guides  as  you  want  to  either  the  MasterBorder  or  the  Layout  area. 
MasterBorder  guides  are  red,  Layout  area  guides  are  blue.  Guides  associated  with  a 
MasterBorder  appear  on  all  pages  that  use  that  MasterBorder.  Guides  you  create  are 
saved  with  the  site.  To: 

♦  Add  a  guide,  select  the  Layout  or  MasterBorder,  and  click  in  the  ruler  or  hold 
down  the  Ctrl  key  while  you  drag  an  existing  guide. 

♦  Move  a  guide,  click  its  arrow  on  the  ruler  and  drag  it. 

♦  Delete  a  guide,  click  its  arrow  and  drag  it  off  the  ruler. 

♦  Show  or  hide  a  guide,  select  Rulers  &  Guides  from  the  View  menu. 

Snapping  Objects  to  Grids,  Guides,  and  Each  Other 

Use  the  Snap  feature  to  align  objects  exactly.  When  you  select  a  Snap  to  command, 
NetObjects  Fusion  creates  a  "magnetic"  attraction  between  the  selected  object  and 
the  grid,  guide,  or  other  objects.  Forcing  objects  to  snap  to  grids,  guides,  and  each 
other  makes  your  HTML  code  more  efficient. 

To  force  objects  to  snap  to: 
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♦  Guides,  select  Snap  to  Guides  from  the  View  menu. 

♦  Grids,  select  Snap  to  Grid  from  the  View  menu. 

♦  Other  objects,  select  Snap  to  Object  Outlines  from  the  View  menu. 

Make  sure  the  item  you  are  snapping  to  is  visible  in  Page  view.  See  "Setting  Up  the 
Page  Design  View  Display"  on  page  71. 


Layering  Objects 


NetObjects  Fusion  supports  Fixed  Page  Layout,  a  form  of  HTML  output  that 
displays  overlapped  objects  correctly.  Site  visitors  using  Microsoft  Internet  Explorer 
4.x  or  higher  or  Netscape  Communicator  4.x  can  see  objects  overlap  other  objects. 
See  "Publishing  with  Fixed  Page  Layout"  on  page  99. 

To  overlap  objects: 

1.  In  Page  view,  on  the  General  tab  of  the  Layout  Properties  palette,  select  Fixed 
Page  Layout  in  the  HTML  output  section. 

2.  Place  two  or  more  objects  in  the  Layout  or  a  Layout  Region. 

Objects  are  layered  in  the  order  in  which  you  place  them.  To  change  the  layering 
order,  see  the  next  section. 

Rearranging  Layered  Objects 

1.   In  Page  view,  click  the  Object  Tree  palette  button  in  the  lower  left  corner. 
Object  Tree  palette  2.   In  the  Object  Tree  palette,  click  the  object  you  want  to  move. 

Handles  appear  around  the  object  on  the  page. 

3.  Click  and  drag  the  object  up  or  down  the  tree  to  move  it  to  a  different  layer,  or 
from  the  Object  menu,  choose  Arrange  Objects  and  select: 

■❖•  Bring  Forward  to  bring  the  object  up  one  layer. 

■0-  Bring  to  Front  to  bring  the  object  to  the  top  of  the  layer, 

"v-  Send  Backward  to  send  the  object  down  one  layer, 

■v-  Send  to  Back  to  send  the  object  to  the  bottom  layer. 
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Use  the  Services  tool  on  the  Advanced  toolbar  to  add  hosted  services  with  a  page 
level  component  to  your  site. 

1.  In  Page  view,  select  the  Services  tool  and  click  on  the  page  where  you  want  to 
place  the  service. 

2.  Select  the  service  you  want  and  follow  the  onscreen  instructions. 


CHAPTER  7 


Controlling  Published  Output 

The  default  settings  for  NetObjects  Fusion  generate  efficient  HTML  that  faithfully 
reproduces  your  visual  design  on  the  published  page.  The  design  of  your  text 
content,  however,  is  subject  to  each  site  visitor's  browser  settings.  To  limit  these 
variations,  NetObjects  Fusion  offers  ways  to  control  published  output.  You  can: 

♦  Select  from  four  different  types  of  page  containers  to  serve  as  your  page  layout 
medium:  Layout  area,  Layout  Regions,  text  boxes,  and  tables. 

♦  Use  one  of  three  HTML  output  methods  to  generate  your  site's  HTML: 
Dynamic  Page  Layout,  Regular  Tables,  and  Fixed  Page  Layout. 

♦  Control  the  table  formatting  priority — horizontal  or  vertical — used  to  generate 
Dynamic  Page  Layout  HTML  pages. 

♦  Select  HTML  or  cascading  style  sheet  (CSS)  text  formatting. 
This  chapter  describes: 

♦  Approaches  to  page  design 

♦  Selecting  a  layout  method 

♦  Selecting  an  HTML  output  method 

♦  Publishing  with  Dynamic  Page  Layout 

♦  Publishing  with  Regular  Tables 

♦  Publishing  with  Fixed  Page  Layout 

♦  Matching  design  priorities  with  HTML  output  method 
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Approaches  to  Page  Design 

In  NetObjects  Fusion,  a  container  is  an  object  into  which  you  can  embed  other 
objects.  A  container  can  be  any  size  and  can  hold  any  kind  and  number  of  objects. 
NetObjects  Fusion  provides  five  types  of  containers  you  can  use  to  design  and  lay 
out  pages: 

♦  The  Layout  is  the  body  of  the  page,  surrounded  on  all  four  sides  by  the 
MasterBorder.  Each  page  has  at  least  one  Layout,  although  you  can  create 
additional  layouts  as  needed.  See  "Working  with  Layouts"  on  page  104. 

♦  Layout  Regions  are  mini-layouts  that  you  can  use  to  subdivide  the  page.  You  can 
draw  and  place  Layout  Regions  anywhere  on  the  page,  and  place  any  kind  and 
number  of  objects — including  text  boxes  or  other  Layout  Regions — within  their 
borders.  See  "Working  with  Layout  Regions"  on  page  106. 

♦  Text  boxes  are  a  special  class  of  objects  because  you  can  embed  other  objects 
within  them.  You  can  also  maximize  a  text  box  so  it  fills  the  entire  Layout — in 
effect,  using  a  single  text  box  to  lay  out  the  entire  page.  See  Chapter  9,  "Working 
with  Text  Boxes." 

♦  Tables  serve  as  containers  for  objects.  If  your  page  design  is  based  on  rows  or 
columns  of  content — as  in  a  spreadsheet  or  other  tabular  arrangement — you 
can  lay  out  all  or  part  of  your  page  in  tables.  You  can  then  lay  out  your  content 
within  the  cells  of  the  table.  You  can  embed  any  object  in  a  table  cell.  See 
Chapter  15,  "Adding  Tables." 

♦  MasterBorders  contain  objects  that  repeat  on  a  set  of  pages.  You  can  place 
anything  in  a  MasterBorder  that  you  can  place  in  the  Layout,  including  banners, 
pictures,  and  text.  By  placing  navigation  bars  in  a  MasterBorder  you  can  give 
pages  with  the  same  navigational  needs  the  same  navigational  structure.  See 
Chapter  10,  "Managing  MasterBorders." 

The  type  of  container  you  choose  determines  which  of  the  following  page  design 
options  you  use.  You  can: 

♦  Position  content  with  pixel-level  precision  by  dragging  objects  into  place.  The 
position-based  approach  uses  Layouts  and  Layout  Regions  as  containers  and 
preserves  your  position-based  layout  by  generating  pages  consisting  of  HTML 
and  cascading  style  sheet  code. 

♦  Use  a  text-based  approach.  With  text-based  design  you  can  preserve  the  flow  of 
content  by  embedding  objects  in  text  boxes  or  table  cells.  Text-based  page 


88 


Chapter  7    Controlling  Published  Output 


layout  generates  lean  and  efficient  HTML  code  that  responds  effectively  to 
variations  in  browser  and  font  size. 

♦  Include  hand-coded  HTML  pages  in  your  site.  You  incorporate  external  HTML 
pages  as  part  of  your  site  by  referencing  them  as  objects  on  a  page,  or  the  page 
itself.  You  can  also  add  HTML  in  HTML  Source  view.  See  Chapter  27, 
"Working  with  HTML  Directly"  and  Chapter  23,  "Referencing  and  Editing 
External  HTML." 

Selecting  a  Layout  Method 

There's  no  "best  way"  to  lay  out  your  pages;  your  circumstances  determine  which 
method  works  best.  The  pros  and  cons  of  each  method  are  listed  here. 

Using  Layouts 

If  precise  placement  of  content  is  important  to  you,  or  if  you  want  to  publish 
individual  pages  using  an  HTML  output  type  that  is  different  from  the  rest  of  the 
site,  use  the  Layout  area  as  the  container  for  your  page  layout. 

Layout  Advantages 

♦  You  have  pixel-level  control  of  the  layout  and  design  of  your  page. 

♦  You  can  drag-and-drop  objects  into  position. 

♦  You  can  specify  the  HTML  output  type  for  any  individual  Layout. 

♦  Layouts  support  the  column  or  row  priority  for  page  formatting,  which  means 
pages  adjust  more  predictably  to  a  site  visitor's  font  and  display  configurations. 

Layout  Limitations 

♦  Position-based  pages  require  more  HTML  code  to  achieve  pixel-level  placement 
of  content,  so  your  HTML  files  will  be  somewhat  larger. 

♦  Text  cannot  flow  around  other  objects  unless  they  are  embedded  in  a  text  box. 
To  create  a  text  wrap  effect  you  have  to  create  multiple  text  boxes  to  contain  the 
other  objects. 

♦  You  cannot  set  the  Layout  to  wrap  to  the  width  of  your  site  visitor's  browser.  If 
the  browser  window  is  wider  than  your  page,  the  page's  background  fills  in;  if 
the  window  is  smaller  than  your  page  width,  your  site  visitor  has  to  scroll. 
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Using  Layout  Regions 

Like  Layouts,  Layout  Regions  offer  pixel-level  placement  and  a  choice  of  HTML 
output  methods,  but  you  can  embed  them  in  text  boxes.  So,  if  you  need  precise 
placement  or  specific  output  for  some  content,  but  want  to  generate  leaner  pages, 
you  can  use  text  boxes  as  your  main  layout  container  and  embed  Layout  Regions  for 
selected  content. 

Layout  Region  Advantages 

♦  You  have  pixel-level  control  of  the  layout  and  design  of  content  within  the 
Layout  Region. 

♦  You  can  embed  the  Layout  Region  within  a  text  box,  which  combines  the 
benefits  of  both  containers. 

♦  You  can  specify  the  HTML  output  type  for  any  individual  Layout  Region. 

♦  Layout  Regions  support  the  column  or  row  priority  for  page  formatting  so 
selected  sections  of  your  page  can  adjust  more  predictably  to  site  visitor's  font 
and  display  configuration. 

Layout  Region  Limitations 

♦  HTML  page  files  are  significantly  larger  and  download  more  slowly. 

♦  Text  cannot  flow  around  other  objects  unless  they  are  embedded  in  a  text  box. 
To  create  a  text  wrap  effect,  you  have  to  create  multiple  text  boxes  within  the 
Layout  Region. 

♦  You  cannot  maximize  a  Layout  Region  to  the  full  Layout  size,  or  set  the  Layout 
Region  to  wrap  to  the  width  of  your  site  visitor's  browser. 

Using  Text  Boxes 

If  efficient,  lean  HTML  pages  are  more  critical  to  site  visitors  than  precise 
placement  of  content,  use  a  text  box  for  page  layout. 

Text  Box  Advantages 

♦  NetObjects  Fusion  generates  extremely  efficient  HTML  code  for  your  site. 
HTML  files  are  smaller,  which  means  they  load  faster. 

♦  Text  within  the  text  box  can  be  set  to  flow  around  other  embedded  objects,  so 
you  don't  have  to  create  multiple  text  boxes  to  achieve  a  text-wrap  effect. 
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♦  You  can  set  the  text  box  to  expand  itself  to  the  size  of  the  browser  window. 
When  your  site  visitor  views  the  page,  it  rewraps  to  fit  within  the  browser 
window. 

♦  You  can  use  any  HTML  output  method:  Dynamic  Page  Layout,  Regular  Tables, 
or  Fixed  Page  Layout. 

Text  Box  Limitations 

♦  You  give  up  pixel-level  control  of  the  layout  and  design  of  your  page,  and  use 
alignment  choices  to  control  the  placement  of  objects,  which  means  the  way 
they  appear  in  a  browser  can  be  somewhat  unpredictable. 

Using  Tables 

If  your  page  design  or  page  content  is  tabular,  you  can  use  a  NetObjects  Fusion 
table  to  control  the  layout  of  the  entire  page. 

Table  Advantages 

♦  Each  cell  within  a  table  functions  like  a  text  box,  with  all  the  attributes  and 
controls  of  a  text  box  outside  the  table. 

♦  You  can  embed  objects  within  cells,  arrange  them  using  each  object's  alignment 
properties,  and  wrap  text  around  objects. 

♦  You  can  use  a  percent  width  layout  so  the  basic  layout  design  adjusts  to  changes 
in  browser  window  width,  font  sizes,  or  screen  resolution. 

Table  Limitations 

♦  You  give  up  pixel-level  control  of  the  layout  and  design  of  your  page,  and  use 
alignment  choices  to  control  the  placement  of  objects. 

♦  Browsers  interpret  tables  differently,  so  be  sure  to  view  the  table  in  all  versions 
of  the  target  browsers. 
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Selecting  an  HTML  Output  Method 

The  wide  range  of  browser  versions  and  capabilities  makes  it  difficult  to  know 
exactly  what  kind  of  HTML  tags  and  functions  will  display  effectively  to  site  visitors. 
Advances  in  HTML  coding  and  browser  abilities  have  also  made  it  possible  to  create 
pages  using  less  code  and  more  efficient  downloads — if  your  site  visitor's  browser 
can  support  it.  To  address  these  concerns  and  take  advantage  of  these 
improvements,  you  can  choose  from  three  types  of  HTML  output  when  publishing 
your  site. 

♦  Dynamic  Page  Layout  uses  Nested  Table  tagging  and  other  features  of  the  3.2 
HTML  specification.  This  is  the  default  output  method  because  it  produces  the 
most  predictable  and  consistent  results  onscreen,  regardless  of  the  type,  version, 
or  configuration  of  the  site  visitor's  system  or  browser  fonts.  Both  Microsoft 
Internet  Explorer  2.x  and  above  and  Netscape  Navigator  2.x  and  above  correctly 
display  pages  published  in  Nested  Tables  format.  See  "Optimizing  Dynamic 
Page  Layout  Output"  on  page  95. 

♦  Regular  Tables  uses  a  single  table  for  your  page  design  and  content.  Both 
Microsoft  Internet  Explorer  2.x  and  above  and  Netscape  Navigator  2.x  and 
above  correctly  display  pages  published  in  Regular  Tables  format,  although  site 
visitors'  results  might  vary  according  to  their  system  and  browser  font  settings. 


Note:  If  you  select  Dynamic  Page  Layout  or  Regular  Tables,  be  sure  your  pages  do 
not  have  overlapping  objects,  or  your  published  results  will  not  be  what  you 
expect.  See  "Editing  Objects  and  Assets"  on  page  80  for  information. 

♦  Fixed  Page  Layout  uses  cascading  style  sheets,  layers,  and  scripts  to  position  and 
publish  your  design  and  content.  Both  Microsoft  Internet  Explorer  4.0  and 
greater  and  Netscape  Communicator  4.x  correctly  display  pages  published  in 
Fixed  Page  Layout  format,  although  the  site  visitors'  results  might  vary 
according  to  their  system  and  browser  font  settings.  Netscape  Navigator  6.0 
does  not  support  this  option. 

On  the  General  tab  of  the  Current  Site  Options  dialog,  you  designate  which  type  of 
HTML  output  is  generated.  This  setting  determines  the  site  setting  for  HTML 
output.  You  can  override  this  setting  for  individual  Layouts  and  Layout  Regions,  so 
NetObjects  Fusion  generates  the  HTML  using  a  different  method.  See  "Setting  the 
HTML  Output  Method  for  a  Layout  or  Layout  Region"  on  page  109  for 
information. 
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Setting  the  Site's  HTML  Output  Method 

To  set  the  publishing  method  for  your  site: 
1.   From  the  Tools  menu,  choose  Options>Current  Site. 
The  Current  Site  Options  dialog  appears. 

_?jx| 


Current  Site  Options 


General  |  META  tags  |  History  |  Backup  | 


Site  name:  MySite 
SiteStyle:    Phoenix  Teal 
Number  of  pages:  3 

Defaults  

Browser  compatibility: 

(Dynamic  Page  Layout  -  All  browsers 

New  page  size: 
Height:   [555  - 


Change...  j 


Width:   1 730 
Character  set: 

I  Western  European  (I  SO -8859-1) 


-3 


Text  formatting  

P  HTML  C  Cascading  Style  Sheets  (CSS) 


Quote  type:  |  Curly  Quotes 
HTML  Options...  | 


-3 


2.   Click  the  Change  button. 
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The  Browser  Compatibility  dialog  appears. 


Browser  Compatibility 


Browser  compatibility  

W  Netscape  Navigator  4.x 

fV  Microsoft  Internet  Explorer  4.0  and  above 


HTML  generation 

£•  Dynamic  Page  Layout 

Uses  complex  hidden  tables  to  achieve  the  highest  level  of 
accuracy  and  better  performance. 

C  Regular  Tables 

Uses  a  hidden  table  to  achieve  a  high  level  of  layout 
accuracy.  Though  performance  is  not  as  good  as  Dynamic 
Page  Layout,  it  avoids  occasional  problems  with  Netscape 
Navigator. 

C  Fixed  Page  Layout 

Uses  Cascading  Style  Sheet  Positioning  and  IE-specific  tags  for 
Microsoft  Internet  Explorer  4.0  and  above  to  create  the  highest 
level  of  accuracy;  uses  HTML  and  Netscape-specific  tags  for 
Netscape  Navigator  4.x. 

When  you  select  both  4.0  browser  options,  both  HTML  output 
options  are  applied. 


OK  Cancel 


3.  Select  Browser  compatibility  options.  You  can  select  Netscape  Navigator  4.x  or 
Microsoft  Internet  Explorer  4.0  and  above  or  both. 

4.  Select  the  default  HTML  generation  option  for  this  site: 

<r  Dynamic  Page  Layout  and  Regular  Tables  are  compatible  with  all  browsers. 

^  If  you  select  Fixed  Page  Layout  and: 

<r-  Netscape  Navigator  4.x,  NetObjects  Fusion  generates  layers  using  the 
Netscape  <LAYER>  tag.  This  optimizes  output  for  sites  viewed  in 
Netscape  Navigator  4.x.  This  option  is  not  supported  by  Netscape  6.0. 

-v*  Microsoft  Internet  Explorer  4.0  and  above,  NetObjects  Fusion  generates 
cascading  style  sheet  positioning  code  to  achieve  a  high  level  of  layout 
accuracy.  This  optimizes  output  for  sites  viewed  in  Microsoft  Internet 
Explorer. 

-0-  Netscape  Navigator  4.x  and  Microsoft  Internet  Explorer  4.0  and  above, 
NetObjects  Fusion  generates  cascading  style  sheet  positioning  code  and 
layers.  This  option  is  not  supported  by  Netscape  6.0. 


94 


Chapter  7    Controlling  Published  Output 


Publishing  with  Dynamic  Page  Layout 

When  you  choose  Dynamic  Page  Layout,  NetObjects  Fusion  uses  complex  hidden 
tables  to  achieve  the  highest  level  of  layout  accuracy  across  browsers.  To  see  the 
table  borders  in  your  browser,  hold  down  Shift  when  you  click  Preview  Site  or 
Publish  Site. 

Dynamic  Page  Layout  is  the  default  publishing  method  for  NetObjects  Fusion. 
Using  Dynamic  Page  Layout: 

♦  You  get  relative  placement  of  your  content  as  you  designed  it  in  Page  view,  with 
relative  spacing  preserved  regardless  of  the  site  visitor's  display  configuration. 

♦  You  can  prioritize  the  vertical  relationship  between  objects  so  site  visitors  are 
more  likely  to  see  the  pages  as  you  designed  them,  regardless  of  their  local 
browser,  font,  and  display  configurations. 

♦  Pages  can  be  viewed  in  most  browsers  that  support  the  3.2  HTML  specification, 
including  Microsoft  Internet  Explorer  2.0  or  higher  and  Netscape  Navigator  2.0 
to  4.x.  Netscape  Navigator  6.0  does  not  support  this  option. 

Optimizing  Dynamic  Page  Layout  Output 

If  you  set  a  Layout  or  Layout  Region  to  Dynamic  Page  Layout  output,  you  can 
control  the  text  flow  for  each  container  by  choosing  the  table  formatting  priority — 
columns  or  rows — that  NetObjects  Fusion  uses  to  generate  the  page  HTML.  This 
helps  to  preserve  your  design  if  a  browser's  font  settings  change  the  size  of  your  text. 

For  example,  a  Columns  or  vertical  priority  keeps  text  together  in  a  vertical 
orientation  when  text  size  changes  rearrange  the  page. 


The  page  with  a  Columns  setting  in 
Page  view  (at  left)  adjusts  vertically 
to  changes  in  browser  text  size,  as 
shown  at  right 
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A  Rows  or  horizontal  priority  keeps  text  together  in  a  horizontal  orientation  when 
text  size  changes  rearrange  the  page. 


The  page  with  a  Rows  setting  in 
Page  view  (at  left)  adjusts 
horizontally  to  changes  in  browser 
text  size  as  shown  at  right 


You  can  make  pages  more  efficient  and  predictable  by  optimizing  placement  of 
objects  within  the  site's  underlying  table  structure.  As  a  general  rule,  it's  best  to 
align  objects  to  each  other  and  to  place  text  boxes  in  their  own  cells  within  the 
underlying  table  structure  so  they  can  resize  as  necessary  in  response  to  browser 
font  changes. 


By  staggering  the  text  boxes  and  image  objects,  as  shown  in  the  diagram  at  left,  you  require 
NetObjects  Fusion  to  create  multiple  tables  with  different  sized  columns.  By  aligning  the  page 
objects,  as  shown  at  right,  you  create  a  simpler  underlying  table  structure  for  the  page,  which  can 
result  in  better  performance  in  Netscape  browsers. 

To  help  determine  the  best  alignment,  you  can  preview  the  underlying  table  row 
and  column  structure  to  see  if  NetObjects  Fusion  can  divide  your  Layout  into  cells 
efficiently  or  if  you  need  to  rearrange  some  objects. 
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1.  In  Page  view,  select  the  Layout  or  Layout  Region  you  want  to  preview. 
The  General  tab  of  the  appropriate  Properties  palette  appears. 

2.  Select  Columns  or  Rows  in  the  HTML  output  section. 

3.  Click  and  hold  the  Show  button. 


Layout  Properties 


Layout  name:   JlJntitledl  Layout 
Layout  Page 


Width:  [600  -j-J  [750  Pixels 

Height:  [434  -j-J  |l  464  Pixels 
r-HTML  output — 
I  Site  Setting 


3 


Tables:  r»  Columns     < "  Rows  |:Showi|. 


P  Layout  is  a  form 
]     Center  in  browser 


.  Show  table 
structure  button 


NetObjects  Fusion  hides  grid  lines,  guide  lines,  and  object  borders  in  the  Layout 
and  displays  solid  gray  lines  to  show  how  the  Layout  is  divided  into  rows  and 
columns. 

4.  Identify  underlying  table  cells  that  contain  multiple  text  boxes  or  other  objects. 

5.  Release  the  Show  button. 

6.  If  row  and  column  dividers  do  not  separate  objects  the  way  you  think  they 
should,  those  objects  might  not  be  aligned  with  pixel-level  accuracy.  To  correct 
this,  Shift+Click  all  the  objects  you  want  to  align. 
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The  Multi-Object  Properties  palette  appears. 


Multi-Object  Properties 


B 


Align 


Horizontally 

Left  Center 


Distribute 
Horizontally 
Vertically 


V  Relative  to  Layout 


Right 


Vertically 

Top  Center  Bottom 

13      is)  JaJ 


7.  Click  the  alignment  setting  appropriate  for  the  selected  objects. 

8.  Repeat  steps  3  through  7  as  needed. 

9.  Preview  the  site  or  page. 

10.  To  test  the  results,  reset  your  browser  display  fonts  to  a  significantly  larger  size 
and  preview  the  site  again. 

You  can  see  a  page's  table  structure  in  the  browser  by  holding  down  Shift  when 
you  click  the  Preview  Site  button. 

Optimizing  AutoFrames 

If  you  are  using  Dynamic  Page  Layout,  you  can  control  realignment  of  AutoFrame 
content  by  selecting,  for  each  frame,  the  table  alignment  setting  that  best  preserves 
your  design.  When  you  use  the  Show  button  to  preview  the  Layout's  table  structure, 
the  preview  includes  the  table  structure  that  NetObjects  Fusion  expects  to  use  in 
AutoFrames. 


Locking  or  Maximizing  a  Text  Box 

If  all  the  objects  on  a  page  are  embedded  in  a  text  box,  you  can  apply  three  text  box 
properties  to  reduce  the  impact  of  variations  in  browser  configurations:  locking  the 
minimum  size  of  a  text  box,  sizing  the  text  box  to  fill  the  Layout,  and  wrapping  the 
text  box  contents  to  the  browser  width.  See  Chapter  9,  "Working  with  Text  Boxes" 
for  information  about  these  options. 
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Publishing  with  Regular  Tables 

When  you  choose  Regular  Tables,  NetObjects  Fusion  translates  each  page  Layout  or 
Layout  Region  into  a  single  HTML  table  with  rows  and  columns,  and  places  your 
content  into  table  cells.  If  text  content  expands  because  of  a  browser  font  setting,  its 
table  row  expands  with  it,  and  the  content  below  it  on  the  page  is  moved  down. 

Regular  Tables  is  recommended  when  you: 

♦  Want  pages  to  display  successfully  in  older  versions  of  some  browsers. 

♦  Use  many  tables  or  Layout  Regions  as  containers  and  want  to  simplify  the 
HTML  output. 

♦  Include  objects  with  actions  on  the  page,  and  you  choose  not  to  use  Fixed  Page 
Layout  as  the  output  method. 

♦  Embed  certain  JavaScript  code  that  will  not  work  with  Dynamic  Page  Layout. 

Publishing  with  Fixed  Page  Layout 

Pages  published  using  Fixed  Page  Layout  can  only  be  viewed  accurately  in  Microsoft 
Internet  Explorer  4.0  or  higher  or  Netscape  Navigator  4.x  browsers.  Older  browsers 
can  view  the  pages,  but  with  unpredictable  results;  in  many  cases  the  page  content  is 
stacked  flush  left  down  the  page. 

Fixed  Page  Layout  uses  cascading  style  sheet  positioning,  layers,  or  both  to  achieve  a 
high  level  of  layout  accuracy.  NetObjects  Fusion  determines  which  of  these  options 
are  applicable  based  on  how  you  set  up  Browser  compatibility  in  the  Current  Site 
Options  dialog.  See  "Setting  the  Site's  HTML  Output  Method"  on  page  93. 

When  you  choose  Fixed  Page  Layout,  NetObjects  Fusion  expresses  the  location  of 
content  in  terms  of  absolute  positioning.  For  example,  instead  of  using  HTML 
workarounds  such  as  empty  table  rows  and  transparent  .gifs  to  position  a  line  of  text 
below  the  top  of  the  page,  the  absolute  positioning  supported  by  Fixed  Page  Layout 
defines  placement  of  the  text  box  a  specific  distance  from  the  top  left  corner  of  the 
page  in  a  simple  statement  of  x,y  coordinates. 

When  you  select  Fixed  Page  Layout: 

♦  NetObjects  Fusion  generates  HTML  code  that  produces  the  same  results  in 
Microsoft  Internet  Explorer  and  Netscape  Navigator  4.x. 

♦  Pages  are  typically  more  compact  and  download  faster  than  table-based  HTML 
pages. 
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♦  You  can  overlap  objects  in  Layouts  or  Layout  Regions.  See  "Layering  Objects" 
on  page  85. 

♦  You  get  consistent  results  with  pages  containing  actions.  See  Chapter  22, 
"Building  Dynamic  Pages." 

♦  There  is  some  risk  for  text-rich  pages.  If  a  Fixed  Page  Layout  page  is  viewed  in  a 
browser  with  large  font  settings,  the  text  boxes  expand  without  regard  for  other 
objects  on  the  page,  which  can  result  in  unplanned  overlapping  of  objects. 
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Design  Priorities  and  Method  Choices 

Use  this  table  to  determine  which  combination  of  layout  methods  and  HTML 
output  methods  best  supports  your  site  design  priorities. 


If  your  priority  is... 

Suggested  container  object 

Suggested  HTML  output 
method 

Lean  HTML  and  fast  browser  loading 

Text  box  or  Layout-sized  table 

Dynamic  Page  Layout 

Precise  placement  control  for  objects 

Layout  and/or  Layout  Region(s) 

Dynamic  Page  Layout 

Maximizing  usability  for  site  visitors 
with  browsers  earlier  than  version  4.0 

Text  box  sized  to  Layout 

Regular  Tables 

Absolute  control  over  minimum  text 
box  height 

Text  box  with  size  locked 

Dynamic  Page  Layout 

Precise  placement  control  for  selected 
content,  but  lean  HTML  otherwise 

Text  box  for  page  with  embedded 
Layout  Region  for  selected  content 

Dynamic  Page  Layout 

Wrapping  text  around  images  and 
other  objects 

Text  box  and/or  table 

Dynamic  Page  Layout 

Overlapping  selected  objects 

Overlapped  objects  in  Layout  Region 
embedded  in  a  text  box 

Dynamic  Page  Layout  for 
site;  Fixed  Page  Layout  for 
Layout  Region  containing 
overlapped  objects 

Wrapping  page  to  varying  browser 
widths 

Text  box  sized  to  Layout  with  Contents 
wrapped  to  browser  width 

Dynamic  Page  Layout 

Drag-and-drop  placement  of  objects 
while  designing  the  page 

Layout  and/or  Layout  Region 

Dynamic  Page  Layout 

Horizontal  or  row-based  content 
flow  such  as  spreadsheets  or  other 
tabular  data 

Table 

Dynamic  Page  Layout 

Delivering  objects  with  actions 
or  other  DHTML  effects  only  to 
advanced  browsers 

Layout 

Fixed  Page  Layout 

Delivering  objects  with  actions 
or  other  DHTML  effects  to  greatest 
number  of  browser  versions 

Objects  with  actions  in  Layout  Region 
embedded  in  a  text  box 

Dynamic  Page  Layout  for 
site;  Regular  Tables  for 
Layout  Region  containing 
objects  with  actions 

Using  cascading  actions 

Embedded  Layout  Regions  containing 
objects  with  actions,  grouped  for  cascading 
messages 

Dynamic  Page  Layout 
Fixed  Page  Layout 
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Working  with  Layouts  and 
Layout  Regions 

Layouts  and  Layout  Regions  are  containers  for  the  objects  you  place  on  your  pages. 
When  you  use  Layouts  and  Layout  Regions  you  can  position  content  with  pixel- 
level  precision  by  dragging  it  into  place  in  the  container. 

This  chapter  describes: 

♦  Working  with  Layouts 

♦  Creating  Layouts 

♦  Working  with  Layout  Regions 

♦  Creating  Layout  Regions 

♦  Setting  the  HTML  output  method  for  Layouts  and  Layout  Regions 

♦  Setting  the  background  of  Layouts  and  Layout  Regions 


103 


Working  with  Layouts 


Working  with  Layouts 


The  Layout  makes  up  the  body  of  the  page.  It  is  surrounded  on  all  four  sides  by  the 
MasterBorder.  Each  Layout  is  attached  to  a  single  page,  unlike  a  MasterBorder, 
which  can  be  applied  to  any  page  in  the  site.  There  is  no  connection  between 
Layouts  on  separate  pages. 

Each  page  has  a  default  Layout  named  PagenameLsyout.  For  example,  when  you 
add  a  page,  its  page  name  is  Untitled*.  Until  you  rename  that  page,  the  default 
Layout  is  named  Untitled#Layout. 

You  can  add  multiple  Layouts  to  a  page,  each  with  its  own  properties,  design,  and 
content.  You  might  use  several  Layouts  to  prototype  or  publish  several  versions  of 
the  same  page.  You  could  also  create  separate  Layouts  for  different  versions  of  your 
site,  such  as  English,  French,  media,  and  text-only.  When  you  publish  the  site, 
NetObjects  Fusion  publishes  each  page  using  the  currently  selected  Layout. 

The  name  of  the  currently  selected  Layout  appears  in  the  Layout  drop-down  list  in 
the  lower-left  corner  of  Page  view. 


You  can  control  various  characteristics  of  the  Layout's  appearance  in  Page  view.  See 
"Setting  Up  the  Page  Design  View  Display"  on  page  71. 

You  cannot  delete  a  Layout.  Objects  in  any  Layout  you  create  are  always  listed  as  In 
Use  in  Assets  view,  even  if  the  Layout  is  not  selected. 


1.  In  Page  view,  display  the  page  for  which  you  want  to  create  a  new  Layout. 

2.  Select  Add  from  the  Layout  drop-down  list. 

A  new,  blank  Layout  appears.  Any  content  on  the  previous  Layout  is  stored  with 
that  Layout.  Each  Layout  you  add  is  named  PagenameLsyout#.  The  number  is 
incremented  for  each  Layout  you  create  for  the  page.  To  change  the  Layout 
name,  see  "Renaming  a  Layout"  on  page  105. 


its  |m6(Mc,iil,i... 


Current  Layout 


Creating  a  New  Layout 
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3.  Add  objects  to  the  Layout  and  modify  the  Layout  properties — such  as  size, 
background,  or  HTML  output  options. 

Selecting  a  Layout 

To  display  a  different  Layout  for  a  page: 

Z)  In  Page  view,  select  a  Layout  from  the  Layout  drop-down  list. 

Renaming  a  Layout 

1.   In  Page  view,  select  a  Layout  from  the  Layout  drop-down  list. 
The  General  tab  of  the  Layout  Properties  palette  appears. 

ZEE 


Layout  Properties 


h  k  ]o 


Height:  [395  -7J  [555  Pixels 
HTML  output- 


Layout  name:  |HomeLayout 
Layout  Page 
Vidth:  [550     ~H  f™  Pixels 

Tabl. 

[~~  Layoutisaform     Settings...  | 

I     Center  in  browser  ( 
HTML... 


Site  Setting  ^ 
ibles:  fT  Columns  C  Rows  Show 


2.   Enter  a  new  name  in  the  Layout  name  field. 

Use  letters  and  numbers  only;  Layout  names  cannot  have  spaces,  hyphens, 
underscores,  or  other  special  characters,  and  they  cannot  begin  with  a  number. 

The  name  of  the  Layout  changes  and  the  Layout  drop-down  list  is  updated. 

You  can  also  use  the  Object  Tree  palette  to  change  the  name  of  the  Layout.  See 
"Renaming  an  Object"  on  page  82. 
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Changing  Layout  Size 

You  can  set  Layout  size  by  entering  specific  measurements  on  the  Layout  Properties 
palette  or  by  dragging  the  Layout  handles.  See  "Setting  Page  Size"  on  page  73. 

To  reduce  the  amount  of  white  space  in  the  Layout  area: 

Z>  In  Page  view,  from  the  Object  menu,  select  Size  Layout  to  Objects. 

Adding  an  Object  to  the  Layout 

The  Layout  is  the  default  container  for  the  page,  and  can  contain  any  object.  To 
place  objects  in  a  Layout,  you  can: 

♦  Select  the  appropriate  tool  and  create  an  object  within  the  Layout. 

♦  Paste  an  object  into  the  Layout  from  the  Clipboard. 

♦  Drag  and  drop  any  object  that  you  previously  placed  with  a  tool. 

Working  with  Layout  Regions 

A  Layout  Region  is  a  container  you  use  to  group  objects  in  a  defined  area  on  the 
page.  Layout  Regions  are  page  segments  that  you  can  place,  size,  and  control 
independently  from  the  rest  of  the  Layout. 

There  are  five  key  aspects  to  using  Layout  Regions: 

♦  When  you  move  a  Layout  Region  on  the  page,  its  embedded  objects  move  with 
it  and  maintain  their  positions  relative  to  each  other  and  the  Layout  Region. 

♦  You  can  send  cascading  action  messages  to  the  Layout  Region,  and  it  will  pass 
the  message  to  all  objects  embedded  within  it.  See  Chapter  22,  "Building 
Dynamic  Pages." 

♦  You  can  embed  a  Layout  Region  within  a  text  box.  This  gives  you  position- 
based  placement  of  the  objects  within  the  Layout  Region,  while  the  rest  of  the 
page  is  arranged  in  a  text-based  layout. 

♦  You  can  assign  an  HTML  output  method  to  a  Layout  Region  independent  of  the 
method  used  for  its  parent  Layout.  See  "Setting  the  HTML  Output  Method  for  a 
Layout  or  Layout  Region"  on  page  109. 

♦  You  can  designate  a  Layout  Region  as  a  form  and  embed  form  objects  within  it. 
See  Chapter  24,  "Designing  and  Implementing  Forms." 
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Layout  Regions  define  an  HTML  table.  If  you  use  many  Layout  Regions,  or  nest 
Layout  Regions,  it  increases  the  size  of  the  page's  HTML  file  and  slows  page 
rendering  in  your  site  visitor's  browser. 

Creating  a  Layout  Region 

1.   In  Page  view,  select  the  Layout  Region  tool  from  the  Container  flyout  on  the 
Standard  toolbar. 


Layout  Region  tool  ^    Draw  a  Layout  Region  on  the  Layout. 


3.  Position  and  size  the  Layout  Region,  just  as  you  would  position  any  other 
object. 

4.  Add  objects  to  the  Layout  Region. 

Adding  Objects  to  a  Layout  Region 

Like  a  Layout,  a  Layout  Region  can  contain  any  object:  text,  pictures,  media,  or  even 
other  Layout  Regions.  To  add  objects  to  a  Layout  Region: 

♦  Select  the  appropriate  tool  and  create  an  object  within  the  Layout  Region. 

♦  Drag  objects  into  the  Layout  Region  from  elsewhere  on  the  page. 

-❖•  To  make  the  Layout  Region  expand  as  needed  to  contain  the  object,  drag  the 
object  into  the  Layout  Region. 

-❖•  When  the  Layout  Region  border  changes  to  a  thick  blue  outline,  the  object  is 
contained  in  the  Layout  Region. 

♦  To  drag  an  object  over  a  Layout  Region  without  embedding  it,  hold  down  Alt  as 
you  drag  the  object. 

Displaying  the  Layout  Region  Grid 

To  make  it  easier  to  place  objects  precisely  in  the  Layout  Region,  you  can  use  a  local 
alignment  grid  that  is  independent  from  the  grid  displayed  within  the  Layout. 

To  display  and  modify  the  Layout  Region  grid: 

1 .   In  Page  view,  select  the  Layout  Region. 
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The  General  tab  of  the  Layout  Region  Properties  palette  appears. 


IB1W 

n  ]q]o 

Grid^Guides — 
Grid 


Width:  | 
Height:  | 


T I  pixels 
"T"j  pixels 


2.  Select  Grid  if  necessary. 

3.  Enter  values  for  the  width  and  height  of  the  local  grid.  The  Layout  Region  grid 
always  displays  in  pixels. 

Converting  a  Layout  Region  to  a  Table 

To  see  the  underlying  table  structure,  you  can  convert  a  Layout  Region  into  a  table. 
NetObjects  Fusion  constructs  a  table  and  places  objects  in  the  same  position  they 
occupied  in  the  Layout  Region. 

1.   Right-click  the  Layout  Region  and  choose  Convert  Layout  Region  to  Table  from 
the  shortcut  menu. 

The  Convert  Region  to  Table  dialog  appears. 


Convert  Region  to  Table 


-  Process  empty  cells  1 

C  Leave  as  individual  cells 

■♦    Ipj  !■:■■  ■ 

C  Span  in  columns 

|      OK      |      Cancel  | 

2.   Choose  how  you  want  NetObjects  Fusion  to  process  empty  cells.  Select: 

♦  Leave  as  individual  cells  to  skip  empty  cells. 

♦  Span  in  rows  to  merge  cells  in  row  order. 

♦  Span  in  columns  to  merge  cells  in  column  order. 
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Setting  the  HTML  Output  Method 
for  a  Layout  or  Layout  Region 

You  can  select  the  HTML  output  method  that  determines  the  type  of  HTML  code 
NetObjects  Fusion  produces  for  the  current  Layout  or  Layout  Region.  This  HTML 
method  is  independent  of  the  method  used  to  publish  the  parent  container. 

For  example,  if  a  Layout  Region  is  placed  in  a  Layout  area,  you  can  set  the  region  to 
a  different  HTML  output  method  than  the  one  used  for  the  Layout  area.  When  you 
publish,  the  Layout  area  is  published  using  its  setting  and  the  Layout  Region  is 
published  using  its  setting.  See  "Design  Priorities  and  Method  Choices"  on 
page  101. 

1 .  In  Page  view,  click  the  Layout  or  Layout  Region. 
The  General  tab  of  the  Properties  palette  appears. 

2.  In  the  HTML  output  section  of  the  General  tab,  select  the  HTML  output 
method  you  want  from  the  drop-down  list. 


-HTML  output 


Site  Setting 


|  Dynamic  Page  Layout  -  All  browser; 

Regular  Tables  -  All  browsers 

Fined  Page  Layout 

luuifb  a  ruiiii  


HTML  output  - 


Parent  Setting 

Dynamic  Page  Layout  -  All  browsers 

Regular  Tables  -  All  browsers 

Fined  Page  Layout  


~3 


i 


For  Layouts 


For  Layout  Regions 


♦  Site  Setting  generates  the  Layout  using  the  output  method  specified  for  the 
entire  site.  To  change  this  setting,  from  the  Tools  menu,  choose  Site  Settings 
and  change  the  Browser  compatibility  setting. 

Parent  Setting  generates  the  Layout  Region  using  the  output  method 
specified  for  the  object  that  contains  it.  For  example,  if  a  Layout  is  set  to 
Dynamic  Page  Layout,  that  is  the  parent  setting  for  a  Layout  Region 
contained  in  that  Layout. 

♦  Dynamic  Page  Layout  uses  nested  HTML  tables  to  achieve  the  highest  level  of 
layout  accuracy  across  browsers.  If  you  select  this  option,  you  can  set  the 
table  formatting  preference.  See  "Publishing  with  Dynamic  Page  Layout"  on 
page  95. 
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♦  Regular  Tables  uses  a  single  table  to  place  objects  on  the  page.  See  "Publishing 
with  Regular  Tables"  on  page  99. 

♦  Fixed  Page  Layout  uses  cascading  style  sheet  positioning  and  layers  to 
optimize  your  site  in  Microsoft  Internet  Explorer  4.0  and  above  and 
Netscape  Navigator  4.x.  See  "Publishing  with  Fixed  Page  Layout"  on 
page  99. 

The  method  you  select  for  the  Layout  affects  the  entire  page,  including  the 
MasterBorder  and  frames  you  assign  to  that  MasterBorder. 


Setting  Layout  and  Layout  Region 
Background  Properties 

You  can  control  the  appearance  of  each  Layout  and  Layout  Region  by  setting 
background  properties.  You  can  assign  a  background  color  and  place  an  image  in 
the  background  of  a  Layout  or  Layout  Region.  You  can  attach  a  background  sound 
to  a  Layout  that  plays  when  a  visitor  views  the  page. 

1.  In  Page  view,  select  the  Layout  or  Layout  Region. 
The  General  tab  of  the  Properties  palette  appears. 

2.  Select  the  Background  tab. 


3.   In  the  Color  field,  select: 

♦  Automatic  to  set  the  background  to  the  background  color  specified  by  the 
Layout's  current  SiteStyle  or  the  Layout  Region's  parent  object. 
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♦  Transparent  to  eliminate  the  background  color  of  a  Layout.  This  option  is 
not  available  for  a  Layout  Region. 

♦  Color  to  select  a  background  color  from  the  Color  Picker.  The  selected  color 
appears  in  the  box  to  the  right  of  the  Color  field.  To  change  the  color,  click 
the  box  and  select  a  new  color  from  the  Color  Picker. 

4.  In  the  Image  field,  select: 

♦  Automatic  to  set  the  background  to  the  image  specified  by  the  Layout's 
current  SiteStyle  or  the  Layout  Region's  parent  object. 

♦  None  to  eliminate  the  background  image  of  a  Layout.  This  option  is  not 
available  for  a  Layout  Region. 

♦  Browse  to  select  an  image  from  the  Open  dialog.  See  "Choosing  an  Image 
Format"  on  page  178.  If  the  picture  is  smaller  than  the  Layout  or  Layout 
Region,  the  browser  tiles  the  image.  To  change  the  image,  click  the  Browse 
button  to  the  right  of  the  field. 

5.  To  assign  a  sound  to  a  Layout  that  plays  when  a  site  visitor  views  the  page: 

a.  Select  Sound.  In  the  Background  Sound  dialog,  click  Browse  and  select  a 
sound  file  from  your  hard  disk  or  LAN. 

You  can  use  sound  files  in  .au,  .aiff,  .midi,  .ram,  or  .wav  formats. 

b.  To  repeat  the  sound  while  the  page  is  open,  select  Continuous  Loop. 

c.  Click  OK. 

The  selected  sound  plays  when  you  preview  the  page. 


Note:  Site  visitors  must  have  a  sound  board,  speakers  or  headphones,  and  a 

browser  that  supports  background  sounds  installed  on  their  computers  to 
hear  background  sound.  To  preview  and  test  sounds,  your  system  must  also 
be  appropriately  configured.  Some  sound  formats  also  require  support  from 
the  Web  server.  See  "Inserting  a  Sound  File"  on  page  298. 
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Working  with  Text  Boxes 

A  text  box  is  a  container  for  text  as  well  as  other  kinds  of  objects,  including  pictures, 
sound  objects,  and  tables.  When  you  use  a  text  box  as  a  container,  you  do  not  have 
pixel-level  control  over  embedded  objects.  For  example,  you  do  not  insert  a  picture 
in  a  text  box  and  drag  it  into  position.  Instead,  you  embed  the  object  at  a  selected 
point  in  the  text  and  adjust  its  placement  using  alignment,  positioning,  and  text- 
wrapping  choices.  When  NetObjects  Fusion  publishes  pages  that  use  a  text  box  as 
the  main  Layout  container,  they  have  extremely  lean  HTML  code  and  load 
relatively  quickly  in  the  site  visitor's  browser. 

This  chapter  describes: 


♦ 

Adding  a  text  box 

♦ 

Selecting  a  text  box 

♦ 

Embedding  objects  in  a  text  box 

♦ 

Wrapping  text  around  objects 

♦ 

Sizing  a  text  box 

♦ 

Setting  text  box  background 

♦ 

Scaling  text  box  contents  to  the  browser  window 

♦ 

Preserving  your  design  intentions 
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Adding  a  Text  Box 


1.  Select  the  Text  tool  from  the  Standard  toolbar. 

2.  Drag  a  box  in  the  location  where  you  want  to  place  the  text  box. 

The  text  box  appears  with  hollow  selection  handles  indicating  you  can  enter  and 
format  text.  See  Chapter  12,  "Designing  with  Text." 


Selecting  a  Text  Box 


♦  To  add  or  edit  text  within  a  text  box,  double-click  in  the  text  box.  The  text  box 
selection  handles  are  hollow,  and  the  Text  Properties  palette  includes  a  Format 
tab  in  addition  to  the  Text  Box  and  Actions  tabs. 


The  hollow 
selection 
handles 
aindicate  you 
can  add,  edit, 
and  format 
text,l 


a|h|o| 

Eont:  |  Verdana 
Sise:  p 


 3 

Paragraph   

style: 


|  Normal  [P]        ^  [ 


J 


Anchor...  |      Format,..  | 


♦  To  work  with  a  text  box  as  a  container,  click  the  text  box.  The  selection  handles 
are  solid,  and  the  Text  Properties  palette  displays  only  Text  Box  and  Actions 
tabs. 


The  solid 
selection 
handles 
indicate  you 
can  work  with 
the  text  box  as 
a  container. 
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|.™  _J 
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|~"  Size  Layout  to  Tent 

P"  Contents  wrap  to  browser  width 
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To  add  and  format  text,  see  Chapter  12,  "Designing  with  Text." 


Embedding  Objects  in  a  Text  Box 

When  you  embed  an  object  in  a  text  box,  a  wide  border  appears  around  the  box  and 
the  insertion  point  appears  as  a  vertical  bar. 


|  When  you  embed  an  object  in  a  text  box, 
|a  wide  border  appears  around  the  box 
|and  the  insertion  point  appears  as  a 

1  l:  i  i  lv  11  L  j  II  _  


f  vertical  bar|You  use  the  object's 
| alignment  options  to  position  the  object 
|iArithin  the  text  box.  An  insertion  marker 
|  ndicates  the  object's  insertion  point. 


*  Text  box  with  wide  border 

—  Insertion  point 


s. 


Insertion  marker 


The  insertion  point  indicates  where  the  object's  HTML  tags  are  inserted  when 
NetObjects  Fusion  generates  the  HTML. 

NetObjects  Fusion  positions  pictures  at  the  insertion  point.  Text,  tables,  sound, 
video,  and  other  objects  are  placed  with  the  top  edge  lined  up  with  the  top  edge  of 
the  text  line  containing  the  insertion  point.  You  use  the  object's  alignment  options 
to  arrange  the  object  within  the  text  box.  An  insertion  marker  indicates  the  object's 
insertion  point. 


When  you  embed  an  object  in  a  text  box, 
a  wide  border  appears  around  the  box 
and  the  insertion  point  appears  as  a 


vertical  bargjYou  use  the  object's 

alignment  options  to  position 


Object 


It  he  object  within  the  text  box. 
kn  insertion  marker  indicates 
*the  object's  insertion  point. 


Insertion  marker 


Embedded  image  aligned  with 
Left  wrap  setting 
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To  move  an  embedded  object,  drag  it.  To  place  an  embedded  object  on  the  top  line 
of  the  text  box,  drag  it  until  its  insertion  marker  is  positioned  before  the  first  text 
character. 


jj/tfhen  you  embed  an  object  in  a 


Object 


text  box,  a  wide  border  appears 
around  the  box  and  the 


insertion  point  appears  as  a 
vertical  bar.  You  use  the  object's 
alignment  options  to  position  the  object 
within  the  text  box.  An  insertion  marker 
indicates  the  object's  insertion  point. 


,  Insertion  marker  positioned 
before  the  first  text  character 

■  Embedded  image  aligned 
with  Left  wrap  setting 


You  can  create  a  new  object  in  a  text  box  or  insert  an  existing  object. 

Dragging  and  Dropping  an  Existing  Object 

1.  In  Page  view,  select  the  Text  tool  from  the  Standard  toolbar  and  draw  a  text  box. 

2.  Add  text.  See  Chapter  12,  "Designing  with  Text." 

3.  Select  an  object  elsewhere  on  the  page  and  drag  it  into  the  text  box. 
The  thick  blue  text  box  boundary  indicates  the  object  will  be  embedded. 

4.  Position  the  insertion  point  at  the  place  in  the  text  where  you  want  to  insert  the 
object  and  drop  the  object. 

5.  Position  the  object  within  the  text  box.  See  "Wrapping  Text  around  Objects"  on 
page  117. 

Creating  a  New  Embedded  Object 

1.  In  Page  view,  select  the  Text  tool  from  the  Standard  toolbar  and  draw  a  text  box. 

2.  Add  text.  See  Chapter  12,  "Designing  with  Text." 

3.  Select  the  appropriate  tool  to  create  the  new  object. 

Note:  To  embed  a  text  box  within  a  text  box,  you  must  create  it  outside  the  text  box 
and  drag  it  into  place. 

4.  Position  the  mouse  pointer  in  the  text  and  draw  a  box  for  the  new  object. 
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If  appropriate,  the  Open  file  dialog  for  that  type  of  object  appears.  Select  the 
object  you  want  to  embed  and  click  OK. 

5.  Position  the  object  within  the  text  box.  See  "Wrapping  Text  around  Objects"  on 
page  117. 

Wrapping  Text  around  Objects 

Once  you  embed  an  object  in  a  text  box,  you  can  wrap  text  around  it. 

1.  In  Page  view,  select  the  object  embedded  in  the  text  box. 
The  object's  properties  palette  appears. 

2.  Click  the  Align  tab. 


1  Rectangle 

Properties 

□ 

= 

ol 

Alignment 


«iF    fty  ft* 

C  Top      C  Middle    C  Bottom 

C    H  3 

C  Left       C  Center    C  Right 

Left    ^|    p  Right  |^ 
wrap    =  wrap 

Space  around  object  

Horizontal:    [o  ^ 

Vertical:  fo 


3.   Set  the  alignment  options. 

Depending  on  the  type  of  object  you  selected,  NetObjects  Fusion  displays  some 
combination  of  the  following  alignment  options: 

♦  Vertical  alignment  of  the  object  to  the  top,  middle,  or  bottom  of  the  text 
line. 

♦  Horizontal  alignment  of  the  object  to  the  left,  center,  or  right  of  the  text  box, 
without  text  wrapping. 

♦  Horizontal  alignment  of  the  object  to  the  text  box,  with  text  wrapping.  If 
you  select  Left  wrap,  the  text  wraps  around  the  right  side  of  the  object;  if  you 
select  Right  wrap,  the  text  wraps  around  the  left  side  of  the  object.  To  embed 
the  object  at  the  top  left  of  the  text  box,  move  the  pointer  to  the  beginning  of 
the  text. 
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♦  In  the  Space  around  object  section,  specify  the  amount  of  vertical  and 
horizontal  space  you  want  to  leave  between  the  image  and  the  text. 

The  text  wraps  around  the  object  according  to  your  specifications. 

□The  rectangle  is 
set  to  Left  wrap.u 

The  circle  is  set 
to  Right  wrap. 


Sizing  a  Text  Box 


When  you  create  or  select  a  text  box,  you  can  control  its  width,  the  minimum 
height,  and  the  scaling  of  the  text  box  to  the  full  width  of  the  Layout  area  or  the 
browser  window. 

1 .  In  Page  view,  select  a  text  box  or  add  a  new  text  box. 
The  Text  Properties  palette  appears. 

2.  Click  the  Text  Box  tab  if  necessary. 


Text  Properties 


*  |  Format...  | 


V  Lock  height  HTML... 

I  Size  Layout  to  TeKt 

|  Contents  wrap  to  browser  width 

I  TeKt  dok  is  a  form  Settings... 


To  set  the  width  of  the  text  box,  select  it  and  drag  the  handles  to  size  the  text  box 
as  needed.  The  text  box  retains  the  width  you  set  unless  you  size  it  to  the  Layout 
area  as  described  in  step  5. 

To  set  a  minimum  height  for  the  text  box,  select  Lock  height  and  drag  the  text 
box  handles  to  the  minimum  height  you  want. 
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If  Lock  height  is  not  selected,  NetObjects  Fusion  automatically  adjusts  the 
height  of  a  text  box  to  fit  the  text  and  objects  it  contains.  Selecting  Lock  height 
prevents  the  text  box  from  getting  smaller  in  the  site  visitor's  browser. 

5.   To  use  a  text  box  as  the  main  Layout  container  on  the  page,  select  Size  Layout  to 
Text.  This  results  in  extremely  lean  HTML  code. 

Before  you  do  this,  embed  all  objects  in  the  Layout  area  in  the  text  box  or  place 
them  in  the  MasterBorder.  Objects  left  in  the  Layout  area  outside  the  text  box 
will  be  overlapped  by  the  text  box  when  you  size  it  to  the  Layout.  Unless  you 
want  this  overlap — and  use  Fixed  Page  Layout  HTML  output  to  support  it — 
you  must  embed,  move,  or  remove  the  objects. 

Setting  Text  Box  Background 

You  can  add  colors  and  pictures  to  text  box  backgrounds.  If  you  choose  a  .gif  with  a 
transparent  color,  the  text  box  background  color  will  show  through. 

1 .  In  Page  view,  select  the  text  box  and  click  the  Text  Box  tab  on  the  Text 
Properties  palette. 

2.  In  the  Color  field,  select: 

♦  Automatic  to  set  the  background  to  the  color  specified  in  the  Text  Object 
style  in  Style  view. 

♦  Transparent  to  set  the  background  to  the  background  color  specified  by  the 
parent  object  of  the  text  box.  For  example,  if  a  small  text  box  is  embedded  in 
a  larger  text  box  with  a  red  background,  the  small  text  box  will  also  have  a 
red  background  if  Transparent  is  selected. 

♦  Color  to  select  a  background  color  from  the  Color  Picker.  The  selected  color 
appears  in  the  box  to  the  right  of  the  Color  field.  To  change  the  color,  click 
the  box  and  select  a  new  color  from  the  Color  Picker. 

3.  In  the  Image  field,  select: 

♦  Automatic  to  set  the  background  to  the  image  specified  in  the  Text  Object 
style  in  Style  view. 

♦  None  to  eliminate  the  background  image. 
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♦  Browse  to  select  an  image  from  the  Open  dialog.  See  "Choosing  an  Image 
Format"  on  page  178.  If  the  picture  is  smaller  than  the  text  box,  the  browser 
tiles  the  image.  To  change  the  image,  click  the  Browse  button  to  the  right  of 
the  field. 

Creating  Pages  that  Resize  to  the  Browser  Window 

You  can  configure  NetObjects  Fusion  so  the  text  box  is  maximized  in  the  site 
visitor's  browser  window.  When  you  use  this  option,  NetObjects  Fusion  generates 
the  page's  HTML  without  using  tables. 

1 .  In  Page  view,  click  the  MasterBorder. 

The  MasterBorder  Properties  palette  appears. 

2.  Select  the  ZeroMargins  MasterBorder  from  the  MasterBorder  name  drop-down 
list  or  use  any  combination  of  Auto  Frames  and  non-framed  MasterBorders  with 
margins  set  to  zero. 

3.  Select  an  existing  text  box  or  create  a  new  one  and  embed  all  objects  in  the 
Layout  area  in  the  text  box. 
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4.   On  the  Text  Box  tab  of  the  Text  Properties  palette,  select  Size  Layout  to  Text  and 
then  Contents  wrap  to  browser  width. 


J, , , 


:q:..i  .'  .  " 

exhilarating,  memorable,  and  satisfying  adventure 
experience  for  all  our  participants,  in  any  season, 
md  any  mountain  environment.^ 

fountain  Jacques  promotes  a  variety  of  active 
Durs  in  alpine  lakes,  rivers,  meadows,  mountains, 
nd  forests.il 

he  Mountain  Jacques  staff  is  committe-d-ta;----. 
ssi sting  you,  our  tour  guest,  in  learning  new  skills 
nd  improving  existing  ones.  H 


3y  guiding  and  encouraging  you  to  enjoy  your 
ctivity  and  accomplish  a  personal  goal,  we  ensure 
ou  have  a  great  vacation  experience,  and  look 
orward  to  returning  for  more. 
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...when  you  publish 
the  page,  the 
contents  of  the  text 
box  adjust  to  the 
size  of  the  browser 
window 


When  you  publish  this  page,  the  contents  of  the  text  box  adjust  to  the  size  of  the 
browser  window. 
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Preserving  Your  Design  Intentions 

When  you  place  a  text  box  on  a  page,  the  text  is  shown  in  the  default  display  font. 
You  format  the  text  and  position  the  text  box  relative  to  other  objects  on  the  page. 

When  you  preview  or  publish  the  page  and  view  it  in  your  browser,  the  size  of  the 
text  box  and  its  alignment  with  the  objects  around  it  are  controlled  by  the  font 
settings  in  the  browser.  If  your  NetObjects  Fusion  default  browser  font  is  10-point 
Times  Roman,  and  your  browser  default  font  is  set  to  14-point  Arial,  you  see  an 
immediate  difference  in  the  arrangement  and  spacing  of  objects,  because  text  boxes 
expand  to  accommodate  the  new  font  size. 


10-point  Times  Roman 


Browser  viewat  14-point  Arial 

This  font  variation  is  not  caused  by  NetObjects  Fusion;  it's  a  consequence  of  site 
visitors  controlling  their  browser  environment.  You  can  avoid  potential  problems 
by  viewing  the  page  in  a  variety  of  browsers  using  different  font  sizes  and  then 
adjusting  your  design  to  accommodate  these  changes.  See  Chapter  7,  "Controlling 
Published  Output"  and  Chapter  8,  "Working  with  Layouts  and  Layout  Regions"  for 
more  information  about  browsers. 
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Managing  MasterBorders 

NetObjects  Fusion  divides  a  page  into  the  Layout  area  and  the  MasterBorder  area. 
The  MasterBorder  contains  objects  that  repeat  on  a  set  of  pages.  You  can  place 
anything  in  a  MasterBorder  that  you  can  place  in  the  Layout,  including  banners, 
pictures,  and  text.  By  placing  navigation  bars  in  a  MasterBorder  you  can  give  pages 
with  the  same  navigational  needs  the  same  navigational  structure. 

You  can  create  a  MasterBorder  and  apply  it  to  all  the  pages  in  your  site  or  just  to 
selected  pages.  A  site  can  use  more  than  one  MasterBorder.  When  you  modify  a 
MasterBorder,  NetObjects  Fusion  automatically  makes  the  change  on  every  page 
that  shares  the  MasterBorder. 

This  chapter  describes: 

♦  Modifying  a  MasterBorder 

♦  Creating  a  MasterBorder 

♦  Changing  MasterBorders 

♦  Applying  a  MasterBorder  to  pages 

♦  Renaming  a  MasterBorder 

♦  Deleting  a  MasterBorder 
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Working  with  MasterBorders 

The  MasterBorder  is  the  set  of  margins — top,  bottom,  left,  and  right — on  the  page. 


Top  margin 


 Left  margin 

Right  margin 


Bottom  margin 


By  default,  the  left,  right,  and  bottom  margins  are  separated  from  each  other  by  an 
outline.  The  lack  of  an  outline  between  the  left  margin  and  the  top  margin  indicates 
objects  can  straddle  that  boundary. 

All  pages  have  a  MasterBorder.  If  no  MasterBorder  is  visible,  either  the 
MasterBorder  display  is  turned  off  on  the  View  menu,  or  the  assigned  MasterBorder 
has  all  margins  set  to  zero,  like  the  ZeroMargins  MasterBorder  included  with 
NetObjects  Fusion.  You  can  change  the  size  of  any  MasterBorder  margin,  even 
those  set  to  zero.  See  "Modifying  the  Current  MasterBorder"  on  page  125. 

When  you  create  a  new  site,  NetObjects  Fusion  creates  a  default  MasterBorder  that 
contains  three  navigation  aids — a  banner  showing  the  page  name  at  the  top,  a 
button  navigation  bar  on  the  left,  and  a  text  navigation  bar  on  the  bottom.  As  you 
add  levels  to  the  SiteStructure,  you  can  set  navigation  bar  options  to  provide  site 
visitors  with  appropriate  access  to  all  pages.  See  "Setting  Navigation  Bar  Type"  on 
page  256. 

If  you  do  not  want  to  include  the  default  banner  and  navigation  bars  in  your  site, 
you  can  delete  them  or  select  the  ZeroMargins  MasterBorder. 
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Selecting  a  MasterBorder 


Z)  In  Page  view,  click  an  empty  space  inside  the  MasterBorder.  If  the  page  has  the 
ZeroMargins  MasterBorder,  click  in  the  gray  area  outside  the  page. 


, , ,  w°  wj ,  j     _J  j, 


This  page  has  a  visible  MasterBorder. 
Click  inside  it 


This  page  has  the  ZeroMargins  MasterBorder. 
Click  outside  the  page 


Modifying  the  Current  MasterBorder 

1 .   In  Page  view,  select  the  MasterBorder. 

The  MasterBorder  Properties  palette  appears.  The  Name  field  shows  the  name 
of  the  MasterBorder  assigned  to  the  current  page. 


MasterBorder  Properties 


E  0  ]o 


nan 


Name:  |  DefaultMasterBorc  _*J  AddrEdit...| 

Margins  (Pixels) 
Left:  [?5     -jj    Right:  fli 
Top:  fe?  Bottom  [39 


HTML... 


If  the  MasterBorder  Properties  palette  does  not  appear,  check  the  View  menu  to 
make  sure  the  MasterBorder  display  and  the  properties  palette  are  turned  on. 
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Modifying  the  Current  MasterBorder 


2.   To  change  the  size  of  the  margins,  drag  the  handles  on  the  ruler. 


1°  M 

,   

N°  J.J 

J 

-|  

— 1 

s 

J 

Drag  these  handles 
to  change  the 
MasterBorder  size 


If  an  object  is  in  the  way — such  as  a  banner  occupying  the  top  and  left  margin — 
you  must  move  the  object  to  resize  the  MasterBorder.  If  the  MasterBorder  is  not 
visible,  you  cannot  drag  the  handles. 

For  precise  margin  settings,  in  the  Margins  section  of  the  MasterBorder 
Properties  palette,  type  values  into  the  fields  or  click  the  arrows. 

3.  Arrange  objects  such  as  a  banner  or  navigation  buttons,  delete  unwanted 
objects,  and  insert  additional  text  or  objects. 

4.  If  conserving  browser  window  space  is  important  to  you,  when  the  objects  are 
arranged  to  your  satisfaction,  from  the  Object  menu,  choose  Size  MasterBorder 
to  Objects.  This  shrinks  the  MasterBorder  to  the  minimum  size  required  to 
display  the  objects  it  contains,  but  it  may  also  affect  your  page  design. 


MasterBorder  margins  before  and  after  being  resized 
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Creating  a  MasterBorder 

1 .   In  Page  view,  select  the  MasterBorder. 

The  MasterBorder  Properties  palette  appears.  The  Name  field  shows  the  name 
of  the  MasterBorder  assigned  to  the  current  page. 


MasterBorder  Properties 
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Name:  |  DefaultMasterBorc  jj  Add^Edit.^" 

Margins  (Pixels) 
Left:  [?5     -jj    Right:  [Ts 
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HTML... 


Click  to  create  a  new  MasterBorder 


2.   Click  the  Add/Edit  button. 

The  Edit  MasterBorder  List  dialog  appears  displaying  a  list  of  all  the 
MasterBorders  in  the  site.  The  current  MasterBorder  is  selected. 


Edit  MasterBorder  List 


Click  to  add  a  MasterBorder 


3.  To  add  a  MasterBorder,  click  Add. 
The  New  MasterBorder  dialog  appears. 

4.  Type  a  name  for  the  new  MasterBorder,  select  an  existing  MasterBorder  to  base 
it  on,  and  click  OK. 
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Changing  MasterBorders 


You  cannot  include  spaces  in  the  MasterBorder  name.  You  cannot  begin  the 
MasterBorder  name  with  a  number. 


Type  a  name  for  the  new  MasterBorder 
Select  a  MasterBorder  to  base  the  new  one  on 


NetObjects  Fusion  creates  a  new  MasterBorder  based  on  the  selected 
MasterBorder  and  makes  it  the  current  MasterBorder  for  that  page.  To  apply  the 
new  MasterBorder  to  other  pages,  see  "Applying  a  MasterBorder  to  Multiple 
Pages"  on  page  129. 

5.   Continue  working  on  the  MasterBorder  by  following  the  steps  in  "Modifying 
the  Current  MasterBorder"  on  page  125. 

Changing  MasterBorders 

1.  In  Page  view,  display  the  page  where  you  want  to  apply  a  different 
MasterBorder. 

2.  Click  in  the  MasterBorder  to  display  the  MasterBorder  Properties  palette. 

3.  Select  the  MasterBorder  you  want  from  the  Name  drop-down  list. 

The  margins  of  the  page  now  display  the  contents  of  the  selected  MasterBorder. 

You  can  change  the  MasterBorder  of  a  single  page  or  a  group  of  pages  in  Site  view. 
See  "Applying  a  MasterBorder  to  Multiple  Pages"  on  page  129. 
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Applying  a  MasterBorder  to  Multiple  Pages 

You  can  apply  a  MasterBorder  to  several  pages  at  one  time  in  Site  view. 

1.   In  Site  view,  select  the  pages  to  which  you  want  to  apply  the  new  MasterBorder. 
See  "Working  with  a  Group  of  Pages"  on  page  33. 

The  selected  pages  are  listed  at  the  bottom  of  the  Properties  palette. 


2.  Make  sure  MasterBorder  is  displayed  in  the  first  Property  field. 

3.  Select  the  MasterBorder  you  want  from  the  second  Property  drop-down  list. 

4.  Click  Set  on  all  to  apply  the  MasterBorder  to  all  selected  pages. 

To  apply  the  MasterBorder  to  an  individual  page,  select  the  page,  then  select  the 
MasterBorder  you  want  to  apply.  You  cannot  undo  this  action;  to  restore  the 
original  MasterBorder,  you  must  reassign  it. 

Renaming  a  MasterBorder 

1.  In  Page  view,  click  in  the  MasterBorder  to  display  the  MasterBorder  Properties 
palette. 

2.  Click  Add/Edit. 

3.  In  the  Edit  MasterBorder  List  dialog,  select  the  MasterBorder  you  want  to 
rename  and  click  Rename. 

Note:  You  cannot  rename  the  ZeroMargins  MasterBorder. 
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Deleting  a  MasterBorder 


4.   In  the  Rename  MasterBorder  dialog,  type  a  new  name  and  click  OK. 


Edit  MasterBorder  List 


5.   Click  Close. 

The  new  MasterBorder  name  now  appears  in  the  Edit  MasterBorder  List  dialog 
and  in  the  drop-down  list  in  the  MasterBorder  Properties  palette. 


Deleting  a  MasterBorder 


MasterBorders  that  are  not  in  use  retain  their  assets  and  are  stored  and  tracked  by 
NetObjects  Fusion.  When  you  import  a  template,  MasterBorders  included  with  the 
template  are  added  to  the  list  of  MasterBorders  for  the  site.  To  avoid  duplication,  it 
is  important  to  delete  MasterBorders  that  are  listed  but  not  used  in  the  site. 

1.  In  Page  view,  click  in  the  MasterBorder  to  display  the  MasterBorder  Properties 
palette. 

2.  Click  Add/Edit. 

3.  In  the  Edit  MasterBorder  List  dialog,  select  the  MasterBorder  you  want  to  delete 
and  click  Delete. 

4.  Click  Yes  to  confirm  deletion. 

If  you  delete  a  MasterBorder  that  is  in  use,  the  ZeroMargins  MasterBorder  is 
assigned  to  those  pages. 
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Working  with  AutoFrames 

AutoFrames  permit  site  visitors  to  scroll  the  body  of  the  page  while  objects  in  the 
Auto  Frame,  such  as  navigation  buttons,  remain  in  view.  You  can  set  any  or  all  of  the 
MasterBorder  margins  as  an  AutoFrame. 

This  chapter  includes: 

♦  Understanding  frames 

♦  Adding  AutoFrames 

♦  Setting  frame  properties 

♦  Targeting  links  in  AutoFrames 
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Understanding  Frames 


Frames  are  an  HTML  mechanism  you  can  use  to  subdivide  the  browser  window 
into  independent  areas.  When  a  site  visitor  scrolls  the  Layout,  the  frame  doesn't 
scroll  with  it,  so  you  can  keep  navigation  buttons  in  view  at  all  times.  Frames  can 
also  reduce  the  amount  of  refreshing  required  by  your  visitor's  browser. 


MasterBorder 
applied  to 
site's  Home  page 


Left  border  is  an 
AutoFrame  with  a 
picture  in  the 
background 


Browser  redraws  only 
the  content  of  the 
Layout  area  when  a 
site  visitor  uses  a  link 
to  a  child  page 
sharing  the  same 
MasterBorder  and 
frame 
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Each  frame  displays  its  own  content,  which  can  include  links,  a  form,  regions,  or 
any  text,  graphic,  or  media  objects.  Links  within  a  frame  can  display  a  page,  or 
display  information  in  the  same  frame  or  a  different  frame.  You  can  define  targets 
for  the  links  contained  in  one  frame  so  they  retrieve  content  into  another  frame. 

A  special  type  of  HTML  page — called  a  frameset — establishes  the  combination  of 
frames  and  frame  properties  that  make  up  the  browser  window  display.  The 
frameset  specifies  the  number  of  frames,  defines  their  size  and  placement,  and 
specifies  the  pages  or  resources  that  make  up  their  original  or  default  content. 

NetObjects  Fusion  supports  two  ways  of  creating  frames. 

♦  You  can  use  the  Properties  palette  in  Page  view  to  set  AutoFrames  and  add 
navigation  controls,  banners,  text,  graphics,  links,  and  scroll  bars.  An 
AutoFrame  frameset  contains  a  body  frame  for  the  Layout  area  of  the  page  and 
frames  for  one  or  more  of  the  MasterBorder  margins:  Left,  Right,  Top,  Bottom. 
An  AutoFrame  frameset  cannot  have  more  than  these  five  frames  and  they  must 
be  in  the  specified  positions. 

♦  If  you  require  more  than  five  frames  or  frames  in  different  positions,  you  can 
manually  code  frames  using  HTML.  See  "Examples  of  Page  and  AutoFrame 
HTML"  on  page  418. 

Although  Netscape  Navigator  and  Microsoft  Internet  Explorer  support  frames,  not 
all  browsers  do.  If  you  use  frames,  you  might  want  to  consider  creating  an  alternate 
site  for  visitors  with  browsers  that  do  not  support  frames.  See  "Accommodating 
Browsers  that  Don't  Support  Frames"  on  page  420  and  "Directing  Visitors  to  a 
Browser-Specific  Page"  on  page  383. 

Within  a  frame,  you  can  influence  how  variations  in  browser  fonts  affect  your 
design.  The  Rows  and  Columns  properties  work  within  a  frame  the  same  way  they 
work  within  a  Layout.  For  information,  see  "Optimizing  Dynamic  Page  Layout 
Output"  on  page  95. 
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Adding  an  AutoFrame 

When  you  add  AutoFrames,  NetObjects  Fusion  applies  them  to  the  current 
MasterBorder  and  all  pages  that  use  that  MasterBorder.  Before  you  add 
AutoFrames,  you  might  want  to  select  or  create  a  designated  "framed" 
MasterBorder  that  you  can  apply  to  the  appropriate  pages.  To  apply  different 
framesets  to  different  pages,  you'll  need  one  MasterBorder  for  each  frameset.  As 
you  develop  these  MasterBorders,  follow  these  guidelines: 

♦  Objects  in  frames  can't  straddle  frame  boundaries,  so  check  the  corners  of  your 
page  before  you  add  AutoFrames.  For  example,  if  you  have  a  banner  across  the 
top  of  the  page  that  overlaps  the  left  and  top  borders,  resize  it  or  move  it  before 
you  turn  on  AutoFrames  for  either  border. 

♦  To  avoid  scroll  bars  displaying  when  you  don't  need  them,  add  a  little  extra 
room  to  margins  you're  going  to  set  as  frames  or  turn  off  scroll  bars  on  the 
Frame  Properties  palette.  See  "Setting  Frame  Properties"  on  page  137. 

See  "Creating  a  MasterBorder"  on  page  127  if  you  need  help  creating  a 
MasterBorder. 

To  set  a  MasterBorder  margin  as  an  AutoFrame: 

1.  In  Page  view,  click  an  empty  space  inside  the  MasterBorder,  or  in  the  gray  area 
outside  the  page. 

The  MasterBorder  Properties  palette  appears. 

2.  Click  the  AutoFrames  tab. 

■j  "J  |o| 

-  Frames  1 
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Leftfl)  Right  Top  Bottom 
r-  Generate  HTML  frame  borders 
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3.   Click  the  button  for  each  margin  you  want  to  set  as  a  frame — Left,  Right,  Top, 
or  Bottom. 

NetObjects  Fusion  adds  a  label — Left,  Right,  Top,  or  Bottom — to  indicate  a 
frame.  In  addition  to  the  frame  you  select,  the  Layout  area  also  becomes  a  frame. 


The  left  margin  is 
set  as  an  AutoFrame 


If  you  add  frames  to  more  than  one  margin,  the  selection  sequence  is  important 
because  frames  overlap  each  other  in  the  order  in  which  you  add  them.  You  can 
change  the  overlap  sequence  by  clearing  the  AutoFrame  option  for  all  margins 
and  then  reselecting  them  in  a  different  sequence. 


E  1  |o  | 
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The  left  frame  was 
selected,  followed 
by  the  bottom 
frame,  as 
indicated  by  the 
numbers  on  the 
AutoFrames  tab. 
As  a  result,  the  left 
frame  extends  the 
full  height  of  the 
page 
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The  bottom 
frame  was 
selected  first, 
followed  by  the 
left  frame.  The 
bottom  frame 
extends  the  full 
width  of  the 
page 


Keep  in  mind  that  because  enabling  AutoFrames  makes  your  page  consist  of  at  least 
three  HTML  pages,  it  can  slow  page  loading. 

Generating  HTML  Frame  Borders 

If  you  want  site  visitors  to  be  able  to  resize  the  frame,  on  the  AutoFrames  tab  of  the 
MasterBorders  Properties  palette,  select  Generate  HTML  frame  borders. 

To  set  frames  to  be  borderless  in  the  site  visitor's  browser,  clear  Generate  HTML 
frame  borders.  NetObjects  Fusion  turns  off  the  borders  for  all  frames  in  that 
MasterBorder. 

To  combine  frames  with  borders  and  frames  without  borders  on  the  same  page,  you 
must  script  the  frames.  See  "Examples  of  Page  and  AutoFrame  HTML"  on 
page  418. 
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Setting  Frame  Properties 


1.   In  Page  view,  click  the  frame  label  or  right-click  in  the  frame  and  select  Frame 
properties  from  the  shortcut  menu. 

The  Frame  Properties  palette  appears. 


Frame  Properties 


ZEE 


]tE]0 


Frame  name:  iLeftFrame 


User  scrollable 


r  Yes      r  No  Auto 


|     User  resizable  frame 
W  Enable  margin  padding 

Table  structure:  fi"  Columns  V  Rows 
HTML...  | 


You  cannot  change  the  name  of  the  frame. 

2.  Select  a  User  scrollable  option: 

♦  Yes.  The  browser  always  displays  vertical  and  horizontal  scroll  bars  in  the 
frame,  whether  needed  or  not. 

♦  No.  The  browser  never  displays  scroll  bars,  even  if  needed  to  display  all 
objects  in  the  frame.  If  the  page  content  is  larger  than  the  frame  itself,  site 
visitors  cannot  see  the  entire  page. 

Due  to  the  nature  of  browsers,  links  to  anchors  on  a  frame  do  not  work  if 
User  scrollable  is  set  to  No. 

♦  Auto.  The  browser  displays  scroll  bars  if  the  size  of  the  page  content  requires 
them. 

3.  Select  User  resizeable  frame  so  site  visitors  can  resize  the  frame. 

HTML  frame  borders  must  be  visible  so  site  visitors  can  drag  them  to  specify  a 
new  size.  If  User  resizable  frame  is  not  available,  return  to  the  AutoFrames  tab 
and  select  Generate  HTML  frame  borders. 

4.  Clear  Enable  margin  padding  if  you  want  to  place  objects  at  the  frame  border 
with  no  spaces. 
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Some  browsers  cut  off  content  that  does  not  have  additional  padding.  Preview 
your  page  in  several  browsers  to  make  sure  it  appears  as  you  intended. 

5.  If  you  are  publishing  using  the  Dynamic  Page  Layout  or  Regular  Tables  HTML 
output  method,  choose  the  most  efficient  table  structure — columns  or  rows.  If 
you  are  publishing  using  Fixed  Page  Layout,  this  setting  has  no  effect.  See 
Chapter  7,  "Controlling  Published  Output." 

6.  Click  the  Background  tab  and  in  the  Color  field,  select: 

♦  Automatic  to  set  the  frame  background  to  the  color  specified  by  the  current 
SiteStyle. 

♦  Transparent  to  eliminate  the  background  color. 

♦  Color  to  select  a  background  color  from  the  Color  Picker.  The  selected  color 
appears  in  the  box  to  the  right  of  the  Color  field.  To  change  the  color,  click 
the  box  and  select  a  new  color  from  the  Color  Picker. 

7.  In  the  Image  field,  select: 

♦  Automatic  to  set  the  background  to  the  image  specified  by  the  current 
SiteStyle. 

♦  None  to  eliminate  the  background  image.  Use  this  setting  to  remove  the 
SiteStyle's  background  image  from  the  frame. 

♦  Browse  to  select  an  image  from  the  Picture  File  Open  dialog.  See  "Choosing 
an  Image  Format"  on  page  178.  If  the  picture  is  smaller  than  the  frame,  the 
browser  tiles  the  image.  If  you  select  a  picture  with  a  transparent  color,  the 
background  color  shows  through.  To  change  the  image,  click  the  Browse 
button  to  the  right  of  the  field. 

You  can  add  an  action  to  a  frame  using  the  Actions  tab.  See  Chapter  22,  "Building 
Dynamic  Pages." 


138 


Chapter  11    Working  with  AutoFrames 


Targeting  Links  in  AutoFrames 

When  a  site  visitor  clicks  a  link  placed  within  a  frame,  the  browser  has  to  know 
where  to  display  the  results.  The  frame  that  displays  the  retrieved  content  is  the 
target  of  the  link;  when  you  specify  which  frame  is  to  display  the  results  of  a  link, 
you  are  targeting  that  frame. 

1.  In  Page  view,  select  the  object  or  text  that  you  want  to  link. 
The  object's  properties  palette  appears. 

2.  Click  the  Link  tool  on  the  Standard  toolbar. 
The  Link  dialog  appears. 

3.  Select  the  type  of  link  you  are  targeting:  Internal  Link,  Smart  Link,  External 
Link,  or  File  Link  and  set  up  the  link.  See  Chapter  19,  "Creating  Links  and 
Anchors." 

4.  In  the  Target  area,  click  Existing  and  from  the  drop-down  list  choose  the  target 
frame  in  which  you  want  to  display  the  linked  information. 


Target:      C  None       (*  Existing: 

body  T 

r  New: 

HTML...  | 

LeftFrame 

blank 
_self 
_parent 

top 

|     Link     |     Cancel  | 

In  this  example,  body  and  LeftFrame  refer  to  the  two  frames  on  the  current 
page.  The  other  four  choices  are  standard  targets  that  are  always  available.  See 
"Setting  Link  Targets"  on  page  283. 

You  may  not  need  to  assign  a  target.  NetObjects  Fusion  automatically  targets 
most  internal  links  for  you. 

5.  Click  Link  to  close  the  dialog  and  create  the  link. 

6.  Preview  the  page  to  test  your  targeted  links. 

Targeted  links  in  framesets  do  not  load  the  URL  of  the  page  into  the  browser 
Location  input  field.  The  browser  sees  the  URL  of  the  frameset,  so  title  and  location 
information  about  the  page  reflect  the  frameset  rather  than  the  page's  content. 
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AutoFrames  and  Browser  Refresh 

When  a  site  visitor  clicks  an  untargeted  link  in  a  frame  you  created  with 
AutoFrames,  the  browser  either  refreshes  the  entire  page  or  only  the  content  of  the 
Layout  area.  This  doesn't  affect  the  appearance  of  the  page,  but  for  performance 
reasons  you  might  not  want  the  browser  to  refresh  the  entire  page  unnecessarily. 

♦  The  browser  refreshes  the  entire  window  if  a  framed  MasterBorder  contains  a 
dynamic  object,  such  as  a  banner  or  highlighted  navigation  button.  The 
dynamic  object,  by  definition,  changes  from  page  to  page,  so  the  browser  has  to 
load  the  new  page.  Rollover  buttons  do  not  change  from  page  to  page,  so  they 
do  not  affect  the  page  refreshing. 

♦  The  browser  exits  the  frameset  and  displays  the  retrieved  resource  in  the  full 
browser  window  if  the  link  retrieves  a  page  with  a  different  MasterBorder  or  an 
external  HTML  page. 

If  neither  condition  exists,  the  browser  refreshes  the  body  frame  even  if  no  target  is 
assigned. 

For  additional  information  about  AutoFrames  and  browser  refreshing,  go  to 
www.netobjects.com/support  and  click  the  Workbench  link. 
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Designing  with  Text 

Text  is  the  primary  tool  for  delivering  your  message.  You  can  type  text  onto  your 
pages,  add  it  to  pictures  and  shapes,  and  format  it  for  maximum  impact.  NetObjects 
Fusion  includes  powerful  features  that  allow  formats  to  flow  from  one  design  level 
to  another,  for  example  from  a  SiteStyle  to  selected  text.  You  can  also  create  and 
apply  text  styles  to  keep  your  site  design  consistent. 

This  chapter  describes: 


♦ 

Adding  text  to  a  page 

♦ 

Formatting  text 

♦ 

Working  with  text  styles 

♦ 

Creating  and  formatting  lists 

♦ 

Inserting  symbols 

♦ 

Adding  text  to  a  shape  or  picture 

♦ 

Creating  and  editing  fields 

♦ 

Checking  spelling 

♦ 

Finding  text 

♦ 

Replacing  text 

♦ 

Counting  words,  lines,  paragraphs,  and  characters 
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Text  tool 


Adding  Text  to  a  Page 


To  add  text  to  a  page,  you  can  use  the  Text  tool,  drag  and  drop  text  from  another 
application,  paste  text  from  the  Clipboard,  or  import  text.  In  each  case,  the  text  is 
placed  in  a  text  box.  See  Chapter  9,  "Working  with  Text  Boxes." 

When  you  add  text  to  a  page,  it's  a  good  idea  to  add  all  your  text  and  then  go  back 
and  apply  formatting. 

Using  the  Text  Tool 

1.   In  Page  view,  select  the  Text  tool  from  the  Standard  toolbar  and  draw  a  text  box 
on  the  page. 

A  text  box  and  the  Text  Properties  palette  appear.  Hollow  selection  handles 
indicate  the  text  box  is  in  text  editing  mode. 


B  l\ U|  ,'|  *;|  Clear 
Paragraph 


Custom  style: 
|  Normal  (P)        ^T]  |<none>  ^T] 


2.  Type  or  paste  text  into  the  box. 

The  text  automatically  wraps  to  the  width  of  the  box. 

To  force  a  line  break,  position  the  insertion  point  at  the  end  of  the  line  and  press 
Shift+Enter. 

3.  Click  outside  the  text  box  to  deselect  it. 

The  text  box  sizes  vertically  to  the  text  you  enter. 
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Dragging  and  Dropping  a  Text  File 

1 .   In  Windows  Explorer,  locate  the  text  file  you  want  to  add  to  the  page. 


Note:  You  cannot  drag  and  drop  Word  2000  .doc  files.  You  can  drag  and  drop  Word 
97.doc  files,  but  you  will  get  better  results  if  you  import  them.  See 
"Importing  a  Microsoft  Office  Document"  on  page  66. 

2.   Drag  the  file  onto  the  page. 

The  text  appears  on  the  page  in  a  text  box. 

Pasting  Text  from  the  Clipboard 

1.  Cut  or  copy  the  text  from  the  original  source,  such  as  a  word  processing 
document. 

2.  In  Page  view,  click  where  you  want  to  position  the  text. 

3.  From  the  Edit  menu,  choose  Paste  or  Paste  Special.  Select: 

♦  Paste  to  paste  the  contents  of  the  Clipboard  onto  the  current  page.  You 
might  lose  some  of  the  original  text  formatting  when  you  copy  and  paste  text 
from  the  Clipboard. 

♦  Paste  Special  to  retain  formatting.  You  can  select: 

■v-  Formatted  Text  (RTF)  to  insert  the  contents  of  the  Clipboard  as  text  with 
font  and  table  formatting. 

-v-  Unformatted  Text  to  insert  the  contents  of  the  Clipboard  as  text  with  no 
formatting. 

■0-  HTML  Format  to  insert  the  contents  of  the  Clipboard  as  HTML  format. 

To  select  the  Paste  Special  default,  click  Set  Paste  Default  and  choose  one  of  the 
three  options. 
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Formatting  Text 

You  can  format  selected  text  using  the  options  on  the  Text  Properties  palette  or  by 
applying  formats  to  entire  paragraphs.  The  Automatic  setting,  which  is  a  choice  for 
many  options  throughout  NetObjects  Fusion,  allows  formats  to  flow  from  one 
design  level  to  another.  See  "Formatting  Selected  Text"  on  page  146,  "Formatting 
Paragraphs"  on  page  148,  and  "Understanding  the  Automatic  Setting"  on  page  145. 

To  apply  many  text  attributes  at  once  in  a  consistent  manner,  you  can  use  the  Styles 
included  with  NetObjects  Fusion  and  also  create  and  apply  your  own  text  styles.  See 
"Working  with  Text  Styles"  on  page  156. 

Selecting  HTML  or  Cascading  Style  Sheet  Text  Formatting 

NetObjects  Fusion  provides  two  ways  to  generate  the  code  that  controls  the  format 
of  the  text  in  your  site — HTML  or  cascading  style  sheets  (CSS). 

When  you  select  HTML  (the  default),  NetObjects  Fusion  uses  standard  HTML  tags 
in  the  code  that  controls  text  formatting.  This  results  in  consistent  text  display 
across  browsers,  from  older  2.0  and  3.0  versions  to  the  most  recent  versions  of 
Microsoft  Internet  Explorer  and  Netscape  Navigator.  Using  this  setting  also  ensures 
that  you  can  update  sites  created  with  earlier  versions  of  NetObjects  Fusion. 

Cascading  style  sheets  provide  a  way  for  site  designers  to  incorporate  typographical 
elements — like  line  spacing  and  letter  spacing — that  are  not  supported  by  standard 
HTML  in  their  sites.  These  styles  are  specified  in  .ess  files,  which  are  attached  to  the 
site.  When  you  select  cascading  style  sheet  text  formatting,  NetObjects  Fusion 
creates  style. ess  and  site. ess  files  and  links  them  to  the  HTML  generated  for  the  site. 


'~i  inden.html  -  Notepad 

HIDES  I 

File     Edit    Search  Help 

(CtDOCTVPE  HTML  PUBLIC  "-//W3C//DTD  HTML  4.0  Transltlonal//EN"> 

<HTML> 

<HEHD> 

<META  HTTP-EQUIU="Content-TypeM  CONTENT="text/htnil ;  charset=IS0-8859-1"> 

<META  NnME="Generator"  C0NTENT="Net0bjects  Fusion  7  for  Uindows"> 

<TITLE>Home</TITLE> 

•CLINK  REL-STYLESHEET  TYPE-"te>!t/cs5"  HREF="File:///C:/NetObjects  Fusion  7/User 

Sites/MySite/Preuiew/style .css"> 

<LINK  REL-STYLESHEET  TYPE^'text/css"  HREF="f  ile  :///C : /NetObjects  Fusion  7/User 

Sites/MySite/Preuiew/site .css"> 

<STYLE> 

</STYLE> 

</HEHD> 

zi 

The  CSS  standard  is  still  evolving.  Cascading  style  sheets  do  not  work  with  2.x  or  3.x 
browser  versions.  Even  the  4.x  versions  of  Netscape  Navigator  and  Microsoft 
Internet  Explorer  and  the  5.x  version  of  Microsoft  Internet  Explorer  do  not  fully 
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support  all  CSS  features,  and  in  some  cases,  support  is  inconsistent.  If  you  choose 
cascading  style  sheets,  be  sure  to  test  your  site  using  all  target  browsers  to  make  sure 
the  site  displays  as  you  intended. 

To  switch  the  text  format  setting: 

1.  From  the  Tools  menu,  choose  Options>Current  Site. 

2.  On  the  General  tab,  in  the  Text  formatting  section,  select  HTML  or  Cascading 
Style  Sheets  (CSS). 

3.  Click  OK. 

Understanding  the  Automatic  Setting 

When  you  select  Automatic  in  text  formatting  dialogs,  the  format  attributes  of  a 
higher  or  parent  style  pass  through  to  the  lower  or  child  style. 

The  order  of  the  cascading  styles  is: 
Browser 

I  ►SiteStyle 

I  ►Site 

I  ►Page 

I  ►  Selected  text 

The  SiteStyle  is  the  parent  of  the  Site,  which  is  the  parent  of  the  Page.  Thus, 
selecting  Automatic  for  an  attribute  at  the  Page  level  lets  the  setting  for  that 
attribute  pass  from  the  Site  to  the  Page.  If  the  same  attribute  is  set  to  Automatic  in 
the  Site  as  well,  then  the  SiteStyle  setting  for  that  attribute  flows  to  the  Site  and  then, 
unimpeded,  to  the  Page. 

For  example,  if  you  set  the  font  color  to  red  at  the  SiteStyle  level  and  set  font  color 
to  Automatic  on  both  the  Site  level  and  the  Page  level,  text  at  the  page  level  is 
automatically  red  when  you  type  it.  The  red  attribute  flows  all  the  way  from 
SiteStyle  to  the  text. 

When  you  change  a  setting  at  a  higher  level,  it  changes  the  corresponding  setting  at 
the  lower  level  if  the  setting  at  the  lower  level  is  Automatic.  So,  if  the  setting  at  the 
Page  level  is  Automatic,  and  you  change  the  font  at  the  Site  level,  the  font  setting 
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changes  for  the  Page  level,  too.  This  feature  provides  you  with  a  fast,  powerful  way 
to  make  formatting  changes  throughout  your  site  by  simply  making  the  change 
once  at  the  higher  levels. 

Of  course,  there  may  be  times  when  you  don't  want  the  changes  from  the  higher 
levels  to  be  inherited  by  the  lower  levels.  In  that  case  you  can  edit  the  text  style  so 
Automatic  is  not  selected  for  the  particular  format  attribute.  Editing  a  style  at  any 
level  overrides  the  settings  from  the  parent  level.  For  example,  if  you  select  text  and 
change  its  color  to  blue,  that  editing  overrides  a  setting  of  red  text  from  the  SiteStyle 
level. 

You  can  mix  choices  among  the  formatting  attributes  so  some  have  the  Automatic 
setting  and  others  don't.  For  example,  you  could  select  the  font  to  be  inherited  from 
a  higher  level  (so  you  set  it  to  Automatic),  but  manually  select  the  color. 

See  "Working  with  Text  Styles"  on  page  156  for  more  information  about  the  flow  of 
text  styles  and  formats  to  text  in  your  site. 

Formatting  Selected  Text 

With  NetObjects  Fusion  you  can  reformat  selected  text  to  change  the  text  font,  size, 
color,  and  style,  as  well  as  the  paragraph  alignment  and  indent.  You  can  format 
selected  characters  in  text  boxes  or  table  cells.  On  a  stacked  page,  you  can  format 
selected  characters  in  formatted  text  fields,  but  in  simple  text  fields,  all  characters 
have  the  same  format.  See  Chapter  26,  "Data  Publishing." 

1 .  Double-click  the  text  box  that  contains  the  text. 
Hollow  selection  handles  appear  around  the  text  box. 

2.  To  select: 

♦  Specific  characters,  drag  over  those  characters. 

♦  A  word,  double-click  the  word. 

To  select  words  quickly,  you  can  set  your  options  to  automatically  select  the 
entire  word.  See  "Setting  Text  Options"  on  page  23. 

♦  A  paragraph,  triple-click  in  the  paragraph. 

♦  A  block  of  text,  click  the  first  character,  then  Shift+Click  the  last  character. 

♦  Multiple  paragraphs,  drag  through  them. 


146 


Chapter  1 2    Designing  with  Text 


3.   Make  sure  the  Format  tab  on  the  Text  Properties  palette  is  selected. 


A|ffl|Q|  

Font:  |  Arial  ^ 
Size:  p  I 

B|  l\u\  Clear  | 

Paragraph  — 

W.MMM  MM  MM 

Style:  Custom  style: 

|  Normal  (P)  |<none>  '  | 

Link...    |        Anchor...  |      Format..  | 


Font  style  buttons 


Alignment  buttons 


Indent  buttons 


4.  Select  a  font  from  the  drop-down  list  on  the  Text  Properties  palette. 

5.  Select  a  font  size  from  the  drop-down  list  on  the  Text  Properties  palette. 

The  relative  settings  (-2  to  +4)  set  the  font  size  relative  to  the  site  visitor's  default 
browser  settings.  To  change  the  unit  of  measurement,  you  can  type  directly  into 
the  Size  field;  for  example,  12  pt.  To  change  the  unit  throughout  the  site,  you 
must  edit  the  font  size  setting  for  the  text  format  in  Style  view. 

6.  Click  a  font  style  button  to  assign  characteristics — bold,  italic,  underline,  and 
strikethrough,  superscript,  or  subscript — to  the  text. 

7.  To  assign  a  color  other  than  the  SiteStyle  color  to  the  text,  click  the  color  sample 
and  select  a  color  from  the  Color  Picker. 

8.  To  remove  all  added  formatting  from  the  paragraph  containing  the  selected 
text,  click  the  Clear  button.  Inherited  formatting  remains. 

9.  To  set  left,  center,  right,  or  block  alignment  for  the  paragraph  containing  the 
selected  text,  click  an  alignment  button. 

10.  To  indent  the  paragraph,  click  an  indent  button  or  press  Tab.  Using  this 
indenting  button  nests  the  selected  paragraph  under  unselected  paragraphs.  To 
nest  the  paragraph  to  a  deeper  level,  continue  to  click  the  button  or  press  Tab. 
Default  indenting  is  set  as  part  of  the  text's  format  style. 

You  can  also  assign  list  formats  and  text  styles  to  selected  text.  See  "Creating 
Bulleted  and  Numbered  Lists"  on  page  164  and  "Working  with  Text  Styles"  on 
page  156. 
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Formatting  Paragraphs 

Using  the  options  in  the  Paragraph  Settings  dialog,  you  can  set  formats  for  the  text 
in  a  paragraph,  the  paragraph  alignment,  spacing,  margins,  indents,  paragraph 
border,  and  paragraph  background. 

When  you  format  paragraphs,  type  all  the  text  first  and  then  go  back  and  apply  the 
formatting.  If  you  set  formats  as  you  enter  the  text,  new  paragraphs  inherit  the  style 
of  the  paragraph  before  it. 


Note:  Some  options  in  the  Paragraph  Settings  dialog  have  no  effect  if  text  formatting  is  set  to 
HTML.  These  options  are  marked  CSS  only  in  the  following  sections.  If  you  apply  these 
options,  you  see  them  in  Page  view,  but  they  disappear  when  you  preview  or  publish 
the  site.  Be  sure  to  test  your  site  in  all  target  browsers  to  ensure  pages  display  as  you 
intended. 


Formatting  Text  in  a  Paragraph 

1.  Position  the  insertion  point  in  the  paragraph  you  want  to  format.  You  do  not 
need  to  select  text. 

2.  On  the  Format  tab  of  the  Text  Properties  palette,  click  the  Format  button. 

3.  In  the  Paragraph  Settings  dialog,  click  the  Character  tab. 


Paragraph  Settings 


Character  |  Paragraph  |  Borders  |  Background! 


■|  Automatic 

Automatic 

Agency  FB 

Regular 

■I 
-1 

Algerian 

0 

Architect 

§1 

Bold 

1 

|Arial 

Bold  Italic 

2 

"F3 


Color:    |  Automatic 
Letter  case;  [Automatic 
Small  caps:    | Automatic 


31   |  Position:  |  Automatic  3 


v"  Aulomatic 

□  Underline 

□  □verline 
Strikethrough 


The  quick  brown  fox  jumps  over  the  lazy  dog. 


 3 

This  devie**  might  nut  show  the  format  j'ou'll  see  on  your  page  bee^us;;  she  text  might  be 
influenced  by  an  additional  ^yte  To  learn  about  the  t-cop^  or  styles,  pie*te  see  !-lei"i 
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4.  Set  the  text  format  options.  If  you  choose  Automatic,  the  settings  for  the  parent 
style  pass  through  to  the  paragraph.  See  "Understanding  the  Automatic  Setting" 
on  page  145. 

♦  Font  applies  the  text  font;  the  list  of  fonts  is  derived  from  the  font  map  in  the 
\NetObjects  System  folder. 

If  the  specified  font  for  the  formatted  text  is  installed  on  the  site  visitor's 
system,  HTML  3.x-compatible  browsers  display  your  text  using  this  font.  If 
the  font  is  not  installed,  the  browser  checks  a  substitution  table.  If  the 
specified  substitution  is  not  possible,  the  browser  uses  its  default  font.  You 
can  change  the  substitution  table  by  editing  the  fontmap.txt  file  in  the 
\NetObjects  System  folder. 

♦  Style  applies  a  style  to  the  text.  You  can  select  italic,  bold,  or  bold  italic. 

♦  Size  sets  the  size  of  the  text.  You  can  choose  the  unit  for  specifying  the  font 
size  from  the  drop-down  list  to  the  right  of  the  size  field. 

You  can  choose  any  size  up  to  22192  pt.,  but  the  actual  font  and  size  site 
visitors  see  is  based  on  their  browser  default  setting  and  therefore  is 
unpredictable.  Also,  some  older  browsers  do  not  support  all  sizes.  For  those 
reasons,  it  is  best  to  use  the  relative  settings  (such  as  -2  to  +4).  Then,  when 
site  visitors  increase  or  decrease  their  browser  font  sizes,  text  size  also 
increases  or  decreases.  But  if  you  use  an  absolute  font  size  such  as  points, 
inches,  or  picas,  the  text  on  your  pages  stays  the  same  size  even  if  site  visitors 
want  to  see  it  larger  or  smaller. 

♦  Color  applies  color  to  the  text.  The  color  box  shows  the  current  text  color.  To 
change  the  color,  click  the  color  box  and  select  a  color  from  the  Color 
Picker. 

♦  Letter  case  sets  the  case  (uppercase  or  lowercase)  of  the  text.  Use  the 
Capitalize  option  to  set  initial  caps,  which  capitalizes  the  first  letter  of  each 
word  in  the  text.  Choose  None  to  remove  a  letter  case  format  set  at  a  higher 
level. 

♦  Small  caps  sets  the  text  to  appear  in  all  small  caps.  If  small  caps  is  selected,  it 
overrides  the  Letter  case  setting.  Not  all  browsers  support  small  caps. 
Choose  None  to  remove  a  small  caps  format  set  at  a  higher  level. 

♦  Position  sets  the  text  to  be  subscript  or  superscript.  Choose  Normal  to 
remove  a  position  format  set  at  a  higher  level. 
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♦  Decoration  sets  the  text  to  the  selected  decorations.  You  can  select  underline, 
overline  (CSS  only),  and  strikethrough. 

Setting  Paragraph  Alignment,  Spacing,  and  Margins 

1.  Position  the  insertion  point  in  the  paragraph  you  want  to  format.  You  do  not 
need  to  select  text. 

2.  On  the  Format  tab  of  the  Text  Properties  palette,  click  the  Format  button. 

3.  In  the  Paragraph  Settings  dialog,  click  the  Paragraph  tab. 


Paragraph  Settings 


Character    Paragraph  |  Border;  |  Background  | 


■Isl 


Line  height; 


Alignment  and  spacing 
Alignment:  ^|  | 

Imagem.ap:       |  Automatic        3         Lette.  spacing: 

Margins  and  indents 


TT3 


Space  above: 
Space  below: 


I  pt    H         First  line  indent:    |~  [pt 
| pt    '\         Left  margin:  |"p"i  ^ 

Right  margin: 


"3 


Tlie  quick  brown  fox  jumps  over  the  lazy  dog 


This  preview  might  not  show  the  format  you'll  see  on  you"  paoe  because  the  text  might  be 
influenced  by  art  additional  style  To  learn  about  the  scope  of  st>>!ev.  please  see  Help. 


4.   Set  paragraph  format  options.  If  you  choose  Automatic,  the  settings  for  the 
parent  style  pass  through  to  the  paragraph.  See  "Understanding  the  Automatic 
Setting"  on  page  145. 

♦  Alignment  sets  the  alignment  to  left,  center,  right,  or  block.  Changing 
alignment  here  also  changes  the  alignment  setting  on  the  Text  Properties 
palette.  If  no  button  is  selected,  the  text  is  aligned  using  the  default 
alignment. 
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♦  Image  wrap  (CSS  only)  sets  how  text  can  wrap  around  an  image.  You  can 
choose  left,  right,  or  on  both  sides  of  the  image.  To  apply  wrap  settings  to  a 
particular  image,  use  the  Picture  Properties  palette.  This  feature  is  most 
useful  when  creating  text  styles.  See  "Creating  a  Text  Style"  on  page  159. 

♦  Line  height  (CSS  only)  sets  the  amount  of  space  between  lines  of  text  in  the 
selected  unit  of  measurement. 

♦  Letterspacing  (CSS  only)  sets  the  amount  of  space  between  characters  in  the 
text  in  the  selected  unit  of  measurement. 

♦  Space  above  (CSS  only)  and  Space  below  (CSS  only)  set  the  amount  of  space 
above  and  below  paragraphs  in  the  selected  units  of  measurement. 

♦  First  line  indent  sets  the  tab  space  indent  for  the  first  line  of  text  in  the  selected 
unit  of  measurement.  This  is  the  only  way  to  indent  a  paragraph  without 
using  the  space  bar. 

♦  Left  margin  (CSS  only)  and  Right  margin  (CSS  only)  set  the  margins  on  either 
side  of  the  paragraph  in  the  selected  units  of  measurement. 

Setting  Borders  and  Padding  (CSS  only) 

Borders  are  lines  around  a  paragraph.  Padding  is  the  amount  of  space  between  the 
border  lines  and  the  text.  If  no  border  is  set,  padding  can  mimic  margins  around 
text. 

Border 


Padc 

ling 

This  text  is  inside  a  bordei 
padding  is  the  space  betw, 
text  and  the  borders. 

.The 
een  the 

Note:  Browsers  can  interpret  your  border  and  padding  settings  differently.  Check  the 

appearance  of  objects  with  borders  and  padding  in  different  browsers  to  make  sure  the 
object  appears  as  you  intended. 

1.  Position  the  insertion  point  in  the  paragraph  you  want  to  format.  You  do  not 
need  to  select  text. 

2.  On  the  Format  tab  of  the  Text  Properties  palette,  click  the  Format  button. 
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3.   In  the  Paragraph  Settings  dialog,  click  the  Borders  tab. 


Paragraph  Settings 


Character  |  Paragraph    Borders  |  Background  | 


Border  settings 


C  Automatic 


C  None         (*  Border 


Active  borders: 
Top:  ~     Left:  \\~ 


Style:     |  Solid 
Width,    [i        |pt  z] 
Color:     | Color:  ttOOOOOO  jj   |  Bottom:  _    Right:  | 

Padding   

Top: 


Bottom:  |~ 


Leff  |  pt  Z] 

Right:       |  |pt  J 


[The  quick  brown  fox  jump  s  over  the  lazy  dog 


"3 


This  preview  might  not  show  '.he  format  you'll  see  on  you'  pa^e  because  the  Sex'  might  be 
influenced  by  an  additional  style  To  learn  about  he  scope  of  styles,  pleas?  set  Help. 


Select  border  settings.  If  you  choose  Automatic,  the  settings  for  the  parent  style 
pass  through  to  the  paragraph.  See  "Understanding  the  Automatic  Setting"  on 
page  145. 

♦  Automatic  applies  the  default  border  setting. 

♦  None  prevents  the  parent  element's  border  settings  from  being  applied. 

♦  Border  makes  the  other  options  available  so  you  can  apply  individual  border 
settings.  Use: 

Style,  Width,  and  Color  to  set  the  border's  line  style,  width,  and  color.  Click  the 
Color  box  to  select  a  color  from  the  Color  Picker. 

Active  borders  to  specify  which  borders  appear  around  the  paragraph.  All 
four  segments  are  selected  by  default,  which  adds  a  complete  box  around  the 
paragraph.  You  can  click  any  combination  of  segments. 


5.   Select  the  amount  of  padding  you  want  at  each  side  of  the  paragraph. 
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Setting  Background  Options  (CSS  only) 


1.  Position  the  insertion  point  in  the  paragraph  you  want  to  format.  You  do  not 
need  to  select  text. 

2.  On  the  Format  tab  of  the  Text  Properties  palette,  click  the  Format  button. 

3.  Click  the  Background  tab. 


Paragraph  Settings 


Character  |  Paragraph)  Borders  Background  j 
Color:     jAutornatic  \ 


|background.gif  ^  |  Browse...  | 

Attachment:    [Automatic  Repeat:  jAutornatic 


Horizontal:      |  Automatic^  Vertical:     |  Automatic 

Value:  Value: 


□ 


The  quick  brown  fox  jumps  over  the  lazy  dog. 


-J 


This  preview  might  not  show  the  torma;  you'll  see  on  your  page  because  the  text  might  be 
influenced  by  an  additional  style  To  learn  about  the  scope  or  styles,  please  see  Help. 


4.   Set  the  background  format  options  for  the  paragraph.  If  you  choose  Automatic, 
the  settings  for  the  parent  style  pass  through  to  the  paragraph.  See 
"Understanding  the  Automatic  Setting"  on  page  145. 

♦  Color  sets  the  background  color  behind  the  text.  Click  the  Color  box  to  select 
a  new  color  from  the  Color  Picker. 

♦  Image  sets  the  background  to  an  image.  Click  Browse  to  select  an  image. 

♦  Attachment  sets  the  background  image  to  either  remain  fixed  or  scroll  as  the 
text  scrolls.  This  option  applies  only  to  Microsoft  Internet  Explorer  4.x. 

♦  Repeat  sets  how  the  image  displays  behind  the  text.  Choose  None  to  display  a 
single  image  that  does  not  repeat.  Select  Both  to  fill  the  background  entirely 
with  the  image.  Select  Horizontal  or  Vertical  to  display  a  row  of  images 
horizontally  or  vertically  behind  the  text. 
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The  horizontal  and  vertical  settings  do  not  work  with  many  browsers.  Do 
not  use  this  feature  unless  you  expect  your  site  visitors  to  use  Internet 
Explorer  5.0  or  higher  for  Windows  or  Internet  Explorer  4.5  or  higher  for 
the  Mac  OS.  Netscape  Navigator  4.7  and  earlier  do  not  use  this  feature 
properly. 

♦  Image  Position  sets  the  initial  position  of  the  background  image.  This  feature 
is  supported  by  Internet  Explorer  3.0  and  higher,  but  is  not  supported  by 
Netscape  Navigator  4.7  or  earlier.  To  set  the  position  to  a  specific  value, 
select  Value  from  the  Horizontal  and  Vertical  drop-down  lists  and  enter  a 
value  for  the  position  in  the  selected  unit  of  measurement. 

To  position  the  image  correctly  in  browsers,  the  horizontal  and  vertical 
values  interact.  Note  that  when  you  change  the  setting  for  the  horizontal  or 
vertical  position,  the  other  setting  changes  accordingly. 

Formatting  Text  Objects  within  Paragraphs 

A  text  object  is  a  portion  of  text  that  you  can  treat  as  a  single  unit.  For  example,  a 
link  is  a  text  object.  When  you  create  a  link  and  format  it,  you  apply  formatting 
features  to  the  link  as  a  single  unit.  If  you  apply  a  color,  it  applies  to  the  entire  link, 
not  just  a  few  letters.  Paragraphs  are  also  text  objects  because  you  can  format  them 
as  a  single  unit  without  formatting  the  entire  text  box  that  contains  the  paragraph. 

Paragraphs  can  contain  links  and  other  text  objects.  When  you  format  a  paragraph 
containing  another  text  object,  some — but  not  all — of  the  new  formatting  is  also 
applied  to  the  contained  object.  Generally,  the  formatting  is  consistent  with  the  type 
of  object  and  the  formatting  available  for  it.  For  example,  links  do  not  have 
margins,  so  if  you  change  the  paragraph's  left  and  right  margins,  the  link  is  not 
affected.  But  because  the  font  of  a  link  can  be  formatted,  if  you  format  the 
paragraph's  fonts  the  link's  fonts  are  also  formatted.  However,  if  the  link's  font  has 
already  been  defined,  it  will  not  take  on  the  paragraph's  font. 

If  you  change  the  format  of  the  contained  object,  it  does  not  affect  the  container 
object.  So,  if  you  change  the  color  of  the  link  text,  the  surrounding  paragraph  text  is 
not  affected. 
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The  following  table  shows  which  text  attributes  affect  a  contained  object  and  which 


do  not. 

Text  attribute  Affects  contained     Does  not  affect 

object  contained  object 

Font  x 

Style  x 

Size  x 

Color  x 

Position  x 

Case  x 

Decoration  x 

Small  caps  x 

Alignment  x 

Image  wrap  x 

Line  height  x 

Letter  spacing  x 

Word  spacing  x 

Space  above  x  (relative  size 

corresponds  to  parent 
element's  width) 

Space  below  x  (relative  size 

corresponds  to  parent 
element's  width) 

First  line  indent  x 

Left  margin  x 

Right  margin  x 

List  style  x 

List  indent  x 

All  border  and  x 


background  attributes 
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Working  with  Text  Styles 

A  text  style  is  a  predefined  set  of  formats  for  the  characters,  paragraphs,  lists, 
borders,  and  backgrounds  of  text.  Text  styles  provide  a  convenient  way  to  specify, 
replicate,  and  update  paragraph  formatting  for  a  text  selection. 

You  can  create  text  styles  or  modify  the  text  styles  included  with  NetObjects  Fusion. 
You  can  also  create  custom  styles  to  use  in  conjunction  with  the  styles  on  the  Styles 
list. 


Span  tool 


Applying  a  Text  Style  to  a  Paragraph 

1.  In  Page  view,  position  the  insertion  point  in  the  paragraph  to  which  you  want  to 
apply  a  text  style. 

2.  In  the  Paragraph  section  of  the  Text  Properties  palette,  select  a  text  style  from 
the  Style  drop-down  list.  The  text  changes  to  the  new  style. 

For  example,  if  the  original  text  is  the  Normal(P)  style,  and  you  select  the 
Heading  1  (HI)  style  for  the  text,  the  entire  paragraph  changes  to  the  HI  style. 

Applying  a  Style  to  a  Text  Span 

A  span  is  a  selection  of  text  that  you  format  as  a  unit.  You  can  assign  a  custom  style 
or  other  formats  to  the  characters  included  in  a  span  to  differentiate  that  text  from 
the  rest  of  the  paragraph.  For  example,  if  you  want  your  company's  name  to  always 
appear  in  bold  italic,  you  can  create  a  custom  style  specifying  those  attributes.  Then 
you  select  each  instance  of  the  company  name  as  a  span  and  apply  the  custom  style. 

You  can  achieve  the  same  result  by  selecting  the  text  and  manually  formatting  it 
from  the  Properties  palette,  but  when  you  use  a  span  you  can  apply  a  custom  style 
quickly  and  then  change  it  globally  if  necessary. 

To  create  a  span: 

1.  In  Page  view,  select  the  text  you  want  to  format. 

2.  Click  the  Span  tool  on  the  Standard  toolbar. 
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The  New  Span  dialog  appears. 


Span  specification 

A  span  is  a  selection  of 
tent  that  you  can  assign 
a  custom  style  to. 

□  r  formatting  can  be 
applied  directly  by  using 
the  Format  button. 


Custom  style: 


3.  Select  a  custom  style  from  the  drop-down  list,  or  click  the  Format  button  and 
apply  formatting  to  the  selected  text. 

4.  Click  OK. 

To  remove  a  span,  position  the  insertion  point  in  the  span,  click  the  Span  tab  on  the 
Text  Properties  palette,  and  click  Remove  Span. 

Using  Custom  Styles 

You  can  create  custom  styles  to  augment  HTML  tag  styles.  HTML  tag  styles,  such  as 
Heading  1  <H1>  or  Normal  (P),  are  fundamental  design  characteristics  of  HTML. 
You  can  see  examples  of  tag  styles  on  the  Text  tab  in  Style  view.  Custom  style 
elements  are  combined  with  HTML  tag  styles  to  produce  a  wide  range  of  formats 
that  you  can  apply  to  different  pages  or  the  entire  site.  See  "Creating  a  Text  Style" 
on  page  159  to  create  a  custom  style. 

For  example,  suppose  the  original  HI  head  is  bold  and  large.  You  want  to  create  a 
series  of  custom  HI  styles.  On  one  set  of  pages  you  want  the  HI  heads  to  look  like  a 
shout,  so  you  create  a  custom  style  to  set  the  text  to  all  capitals  and  italic  and  you 
call  this  custom  style  Shout.  On  the  other  pages  you  might  want  the  HI  heads  to 
look  like  a  whisper,  so  you  create  a  custom  style  that  sets  the  text  to  be  lowercase 
and  condensed.  Since  you  don't  want  the  text  to  inherit  the  bold  and  large  size  from 
the  original  HI  setting,  you  do  not  select  Automatic.  You  name  this  custom  style 
Shhh. 

When  you  apply  the  custom  style  to  the  text  with  the  original  HI  head,  the  only  text 
attributes  affected  are  those  specified  in  the  custom  style.  So,  if  the  original  HI  head 
is  bold  and  large,  the  result  of  applying  the  custom  style  Shout  to  selected  text  looks 
like  this: 
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THE  HI  HEADS  WOULD  LOOK  LIKE  THIS 

The  text  is  bold  and  large  (from  the  original  <H1>  head)  and  also  all  capitals  and 
italic  (from  the  custom  style).  The  bold  and  large  attributes  pass  through  to  the 
<H1>  Shout  style  because  the  custom  style  did  not  affect  those  attributes. 

Applying  the  Shhh  custom  style,  however,  looks  like  this: 

The  HI  heads  would  look  like  this 

In  this  case,  the<Hl>  text  in  the  Shhh  style  does  not  include  the  bold  and  large  font 
size  because  you  changed  those  attributes  instead  of  using  the  Automatic  settings.  If 
the  settings  for  bold  and  large  remained  Automatic,  the  Shhh  style  would  include 
the  bold  and  large  font. 

When  you  apply  custom  styles,  the  name  of  the  custom  style  is  appended  to  the 
original  HTML  tag  style  with  a  period  to  differentiate  the  original  HTML  tag  style 
from  the  new  custom  style.  So,  the  two  <H1>  custom  styles  become  <Hl.Shout> 
and  <Hl.Shhh>.  When  NetObjects  Fusion  generates  the  HTML,  the  styles  are 
represented  as  <H1  class="Shout">  and  <H1  class="Shhh">. 

Setting  a  Style's  Scope 

When  creating  styles,  you  can  limit  the  range  of  a  style's  effects  by  setting  the  scope 
of  the  style.  The  scope  of  a  style  determines  where  the  style's  effects  are  available  and 
applied.  The  scope  options  are: 

♦  All  available  styles.  Shows  all  styles  regardless  of  scope. 

♦  SiteStyle.  The  style  is  available  whenever  the  SiteStyle  is  applied. 

♦  Site.  The  style  is  available  throughout  the  current  site. 

♦  Page.  The  style  is  available  only  on  a  specific  page  of  the  current  site. 
You  set  the  scope  of  a  style  when  you  create  it. 
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Creating  a  Text  Style 

1.   In  Page  view,  from  the  Text  menu,  choose  Edit  Text  Styles. 
The  Text  Styles  dialog  appears. 


Scope: 


Styles: 


Normal  (P) 

Headingl  (H1) 

Heading  2  (H2) 

Heading  3  (H3) 

Heading  4  (H4) 

Heading  5  (H5) 

Heading  6  (H6) 

Link  (A) 

Link:  active  (A:  active) 

Link:  hover  (A:  hover) 

Link:  linked  (A:  link) 

Link:  visited  (A:  visited) 

List  item  (LI) 

List,  ordered  (OL) 

List,  bulleted  (UL) 

<l 

I  ► 

Value 


This  preview  might  not  show  the  tormat  you'll  see  on  your  pege  because 
the  tent  might  be  influenced  by  an  additional  style.  To  learn  about  the  scope 
of  styles,  please  see  Help. 


Duplicate... 


The  selected  scope  appears  in  the  field  at  the  top  of  the  dialog. 

The  pane  on  the  left  lists  the  HTML  tag  styles  and  any  custom  styles  you  created 
for  the  selected  scope. 

When  the  scope  is  set  to  All  available  styles,  you  can  determine  a  style's  scope 
using  the  tree  structure  in  the  Text  Styles  dialog.  Click  the  plus  sign  next  to  a 
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style  to  see  its  scope  and  the  specific  pages  it  applies  to.  In  this  example,  the 
custom  style  named  .Sales  applies  only  to  the  Home  page. 


Scope: 


BAH  available  styles 
Styles: 


+  Linkhover  (A:hover) 
S  -  Link:  linked  (A:  link) 
+  Linkvisited  (A:visited) 
ffl  -  List  item  (LI) 
ffl-  List,  ordered  (PL) 
H-  List,  bulleted  (UL) 
ffl- Address  (ADDRESS) 
i  - Blockquote  (BLOCKQUOTE) 

Tent  Object  (.TextObject) 

TentNavBar  Object  (.TextNa* 

Fined  spacing  (PRE) 

Body  (BODY) 

.Sales 
;  -  Home 


Duplicate... 


T  his  preview  might  not  shew  she  format  you'll  see  on  your  page  because 
the  tent  might  be  influenced  by  an  additional  style.  To  learn  about  the  scope 
of  styles,  please  see  Help. 


2. 


Depending  on  the  selected  scope,  the  list  of  HTML  tag  styles  can  include  link 
styles — Linkactive,  Link:hover,  Link:linked,  and  Link:visited.  For  example, 
Link:hover  is  the  style  applied  when  a  site  visitor  moves  the  mouse  pointer  over 
the  link  but  does  not  click.  Link:visited  is  the  style  applied  after  a  visitor  clicks 
the  link. 

You  can  also  create  custom  styles  for  the  navigation  bar,  a  text  object,  lists,  and 
so  on,  for  the  styles  listed  in  the  pane  on  the  left. 

From  the  Scope  drop-down  list,  select  the  scope  you  want  to  work  with.  For 
example,  if  you  want  to  see  the  styles  that  affect  only  the  current  page,  select 
Styles  in  page. 


3.   Click  New  or  Duplicate. 
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The  New  Text  Style  dialog  appears. 


New  Text  Style 


Style  type 


P  Redefine  HTML  tag  jjj 


C  Create  custom  style  j 


Style  scope  

r*  Page  specific 

Style  will  only  be  available  on  the  current  page. 

f  Site  wide 

Style  will  be  available  throughout  entire  site. 


The  Duplicate  Text  Style  dialog  box  is  similar.  Duplicating  a  style  is  a  quick  way 
to  give  it  a  different  scope.  For  example,  you  can  duplicate  the  HI  style  to  the 
H2,  H3,  and  H4  headings  and  then  edit  them  individually. 

4.  In  the  Style  type  section,  select: 

♦  Redefine  HTML  tag  and  choose  a  tag  to  edit  from  the  drop-down  list. 

♦  Create  custom  style  and  type  a  name  for  the  style  in  the  field. 

A  period  is  added  to  the  custom  style's  name,  such  as  .customstylename.  In 
HTML  the  custom  style  is  then  referred  to  as  class=customstylename. 

5.  Select  a  style  scope  for  the  new  style. 

♦  Page  specif ic.  If  you  select  this  option  the  new  style  is  only  available  for  the 
current  page.  If  you  are  redefining  an  existing  tag,  the  original  definition  is 
still  in  force  for  the  rest  of  the  site.  If  you  create  a  new  style,  it  is  not  available 
on  any  other  page  of  the  site. 

♦  Site  wide.  If  you  select  this  option  the  new  style  is  available  throughout  the 
current  site.  If  you  are  redefining  an  existing  tag,  all  instances  of  this  tag 
change  throughout  the  site.  For  example,  if  you  change  the  HI  font  color  to 
red  and  select  Site  wide,  all  text  in  the  site  with  that  style  applied  becomes 
red. 

6.  Click  OK. 

The  Text  Format  dialog  appears.  You  can  now  set  the  attributes  for  each  feature 
of  the  style.  See  "Formatting  Paragraphs"  on  page  148  and  "Formatting  a  List" 
on  page  165  for  details. 
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Creating  a  Custom  Text  Attribute  (CSS  only) 

When  you  create  a  text  style,  the  Text  Style  dialog  includes  a  Custom  tab  where  you 
can  define  custom  text  attributes.  You  should  only  create  custom  text  attributes  if 
you  know  HTML  and  cascading  style  sheet  coding  and  understand  the  implications 
of  cascading  style  sheet  features. 

For  example,  if  you  enter  the  name  cursor  and  the  value  wait,  the  pointer  in 
Microsoft  Internet  Explorer  5.0  can  appear  as  an  hourglass.  If  you  assign  this  new 
custom  style  to  the  Text  Object,  the  pointer  displays  as  an  hourglass  when  it  is  over 
a  text  object  on  your  site's  pages.  Similarly,  you  can  use  custom  attributes  to  take 
advantage  of  cascading  style  sheet  attributes  not  supported  directly,  such  as  the 
pointer. 

To  create  a  custom  attribute: 

1.  Follow  the  steps  in  "Creating  a  Text  Style"  on  page  159  to  create  a  new  text  style. 

2.  In  the  Text  Format  dialog,  click  the  Custom  tab. 

3.  Click  the  New  button. 


Tent  Format  -  .shout  [H 


Character  |  Paragraph  |  List     |  Borders  |  Background    Custom  | 


I  Value 


Attribute  properties 
Maine. 


OK  Cancel 


4.   Enter  the  cascading  style  sheet  name  for  the  new  attribute  and  then  enter  its 
value. 
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To  edit  an  existing  custom  attribute,  select  it  in  the  list  on  the  Custom  tab.  Its 
name  and  values  appear  in  the  Attribute  properties  boxes  on  the  Custom  tab. 
Make  your  changes  in  those  boxes. 

5.   Click  OK. 

Custom  attributes  do  not  display  in  Page  view  but  do  appear  in  the  browser  if  it 
supports  cascading  style  sheet  features. 

Modifying  a  Text  Style 

1.  In  Page  view,  from  the  Text  menu,  choose  Edit  Text  Styles. 
The  Text  Styles  dialog  appears. 

2.  Select  the  style  you  want  to  modify,  then  click  Edit. 
The  Text  Format  dialog  appears. 

3.  To  change  the  style,  see  "Formatting  Text"  on  page  144. 

4.  When  you  finish,  click  OK  in  the  Text  Format  dialog. 

5.  In  the  Text  Styles  dialog,  click  Close. 

NetObjects  Fusion  updates  any  paragraph  to  which  you  applied  the  style. 

Deleting  a  Text  Style 

1.  In  Page  view,  from  the  Text  menu,  choose  Edit  Text  Styles. 
The  Text  Styles  dialog  appears. 

2.  Select  the  style  you  want  to  delete,  then  click  Delete. 

You  cannot  delete  a  style  defined  with  multiple  scopes.  You  must  delete  each 
one  separately.  To  see  if  a  style  has  multiple  scopes,  select  All  Available  Styles 
from  the  Scope  drop-down  list  and  click  the  plus  sign  next  to  the  style. 

3.  Click  OK  to  confirm  deletion  and  click  Close. 
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Creating  Bulleted  and  Numbered  Lists 

To  create  a  simple  numbered  or  bulleted  list: 

1.   In  Page  view,  select  the  text  you  want  to  format  as  a  numbered  or  bulleted  list, 
i  - 1  -  - 1  2.   Click  a  list  type  button  on  the  Text  Properties  palette  to  select  a  numbered  list  or 

z  —  |  ■  —  | 

a  bulleted  list. 

List  type  buttons 

When  you  click  a  list  type  button,  NetObjects  Fusion  applies  the  default 
Ordered  or  Unordered  List  style.  To  change  the  style,  see  "Formatting  a  List"  on 
page  165. 

3.  To  add  an  item  to  the  list,  press  Enter  at  the  end  of  a  line.  Press  Shift+Enter  to 
start  a  new  line  under  the  same  bulleted  item. 

To  remove  the  list  style  from  the  selected  list  level,  click  the  List  tab  on  the 
Properties  palette  and  click  Remove  List. 

To  create  a  multi-level  numbered  or  bulleted  list: 

1.  In  Page  view,  select  the  text  you  want  to  include  in  the  list.  Make  sure  each  item 
in  the  list  is  a  separate  paragraph. 

2.  Click  a  list  type  button  on  the  Text  Properties  palette. 

3.  Select  the  paragraph  or  paragraphs  you  want  to  make  subordinate  and  click  the 
right  indent  button  or  press  Tab. 

■  Bullet  one,  level  one^f 

o  Bullet  one,  level  twolf 
o  Bullet  two,  level  two^ 

■  Bullet  two,  level  one^f 

■  Bullet  three,  level  one^f 

A.  Bullet  one,  level  two^f 

B.  Bullet  two,  level  two^f 

Each  click  of  the  indent  button  moves  the  selected  paragraphs  over  one  level  in 
the  list  and  adds  the  appropriate  bullet  or  list  character  for  that  level. 
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Formatting  a  List 

1 .  In  Page  view,  select  any  text  in  a  numbered  or  bulleted  list. 

2.  Click  the  List  tab  on  the  Text  Properties  palette. 


3.   Click  the  Format  button. 

The  List  Settings  dialog  appears. 


CharactetJ  Pa'a9raph    List     1  Borders  |  Background  | 

List  style 

Bullet:  (Automatic^] 

Bullet  Image:      1                            Hj*J  Browse... 

Line  indent   

(•  Automatic 

C  All  lines 

C  First  line  only 

Preview   

The  quick  browmfes  jumps  over  the  lazy  dog. 

II 

"his  preview  might  not  show  the  format  you'll  see  on  your  page  because  the  text  might  be 
influenced  by  an  additional  style  To  learn  about  the  scope  of  styles,  please  see  Help. 

|       OK      |        Cancel  | 
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4.  Set  the  List  style.  If  you  choose  Automatic,  the  settings  for  the  parent  style  pass 
through  to  the  list.  See  "Understanding  the  Automatic  Setting"  on  page  145. 

♦  Bullet.  Select  a  bullet  character  or  type  of  numbering  from  the  drop-down 
list. 

♦  Bullet  Image  (CSS  only).  To  use  a  graphic  as  the  bullet  character,  click  Browse 
and  select  the  image  you  want. 

5.  Set  the  Line  indent  (CSS  only). 

♦  Automatic  applies  the  indenting  of  the  object  that  contains  the  list  whenever 
the  list  text  wraps  to  a  second  line.  The  amount  of  the  indent  is  preset.  See 
"Understanding  the  Automatic  Setting"  on  page  145. 

♦  All  lines  indents  all  lines  in  each  listed  item  to  the  same  position. 

♦  First  line  only  indents  the  first  line  of  each  item  in  the  list,  but  not  the  other 
lines. 

6.  Click  OK. 

Setting  the  List  Start  Value 

If  you  select  a  numbered  list  and  want  it  to  start  with  a  value  other  than  1  or  A,  you 
can  define  a  new  start  value. 

To  set  a  new  start  value: 

1 .  In  Page  view,  select  any  level  in  the  numbered  list.  New  start  values  only  apply  to 
numbered  lists,  not  bulleted  lists. 

2.  Click  the  List  tab  on  the  Text  Properties  palette. 

3.  In  the  Start  Value  box,  enter  a  new  start  value,  or  click  the  up  and  down  arrows 
to  set  the  new  value. 

All  entries  at  that  level  of  the  numbered  list  now  conform  to  the  new  start  value. 
For  example,  if  you  change  the  start  value  to  3,  the  first  entry  at  that  level  is 
labeled  3,  and  the  next  entry  is  labeled  4. 
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Setting  the  List  Bullet  or  Numbering  Type 

You  can  choose  a  type  of  numbering  or  bullet  character  for  each  level  of  a  list. 
To  set  a  new  bullet  or  numbering  type: 

1 .  In  Page  view,  select  any  level  in  the  list. 

2.  Click  the  List  tab  on  the  Text  Properties  palette. 

3.  From  the  Bullet  type  drop-down  list,  select  the  type  of  bullet  character  or 
numbering  you  want  for  that  level  of  the  list. 

The  text  styles  associated  with  lists  are  List,  Ordered  <OL>,  List,  Bulleted  <UL>, 
and  List  Item  <LI>.  Selecting  the  type  of  bullet  character  or  numbering 
automatically  selects  the  proper  text  style  from  the  ordered  or  bulleted  list. 
Changing  the  <LI>  style  affects  both  types  of  lists. 


Note:  Lists  are  formatted  with  bullets  based  on  the  List  Item  <LI>  style;  however,  you  can 
also  format  lists  using  other  styles,  such  as  Normal  <P>.  In  that  case,  the  list  will  not 
have  a  bullet  character  associated  with  it.  Conversely,  if  you  type  a  series  of  paragraphs 
and  want  to  make  them  a  list,  you  can  apply  the  List  Item  <LI>  style  to  the 
paragraphs. 

Inserting  Symbols 

You  can  insert  special  symbols,  such  as  an  em  dash  or  copyright  symbol  into  text. 

1 .  In  Page  view,  double-click  the  text  box  containing  the  text  where  you  want  to 
insert  the  symbol. 

2.  Click  the  location  in  the  text  where  you  want  to  insert  the  symbol. 
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3.   From  the  Text  menu,  select  Insert  Symbol. 


Insert  Symbol 


Description 


Shortcut  key 


Em  Dash 

© 
® 

En  Dash 

Non-breaking  space 

Copyright 

Registered 

Ctrl+Shift+Space 

Alt+Ctrl+C 

Alt+Ctrl+R 

TM 

Trademark 
Ellipsis 

Single  Open  Quote 

Alt+Ctrl+T 
Ctrl+V 

Single  Close  Quote 

Ctrl+7 

-i  ■-■■<• 

4.   In  the  Insert  Symbol  dialog,  select  a  symbol  and  click  Insert. 
The  symbol  appears  in  the  text. 
You  cannot  edit  the  list  of  symbols. 

Adding  Text  to  a  Shape  or  Picture 

When  you  add  text  to  a  shape  or  picture,  the  text  becomes  part  of  a  new  image  file 
when  you  publish  the  page.  Because  the  text  is  part  of  the  image,  the  site  visitor's 
browser  displays  the  correct  font,  even  if  the  font  is  not  installed  in  the  visitor's 
browser. 

If  you  add  text  to  a  picture  file,  when  you  publish  the  site,  NetObjects  Fusion 
generates  a  new  picture  file  listed  in  Publish  view  as  an  auto-generated  image.  Your 
original  file  is  unchanged  in  Assets  view  and  not  included  among  the  site's 
published  assets.  If  you  remove  the  text  from  the  picture,  the  image  remains  listed 
as  an  auto -generated  image. 

Windows  98,  Windows  NT,  Windows  2000,  Windows  ME,  Windows  XP,  and  some 
versions  of  Windows  95  include  a  utility  for  smoothing  fonts  (also  called  anti- 
aliasing) that  works  with  NetObjects  Fusion.  To  turn  on  font  smoothing  in 
Windows  95  and  Windows  NT,  open  the  Control  Panel,  click  the  Display  icon,  and 
on  the  Plus!  tab  select  Smooth  edges  of  screen  fonts.  In  Windows  98,  Windows 
2000,  Windows  ME,  and  Windows  XP  the  option  is  on  the  Effects  tab.  You  can  also 
use  other  font  management  utilities,  such  as  Adobe  Type  Manager,  to  smooth  fonts. 

To  add  text  to  a  shape  or  picture: 
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1.   In  Page  view,  select  the  shape  or  picture  to  which  you  want  to  add  text. 

The  corresponding  properties  palette  appears.  If  you  are  working  with  a  picture, 
click  the  Effects  tab. 


Rectangle  Properties 


□  o 


333 


Altjag:  |~~ 


r-  Color  

FN,:  [— 

Color...  | 

Line: 

Color...  | 

Tent  in  element- 
r  Enable 


Picture  Properties 


^|  j~  Use  color  [■ 


r 


Tent  in  element 


333 


[✓  Enable       Settings...  | 


Rotate  0     ^tJ     Border  |0  ^ 


2.   In  the  Text  in  element  section,  select  Enable  and  click  Settings. 
The  Text  in  Element  Settings  dialog  appears. 


Text  in  Element  Settings 


[ 


J 


Relative  alignment:  =- 

Font:  |Tirnes  New  Roman 

Set... 

Set... 

Horizontal  position  

r  Left  F  Center         C  Right 


(Vertical  position  
C  Tog           f*  Center 


r  Bottom 


3.   Type  the  text  you  want  to  add.  Press  Enter  to  start  a  new  line. 

If  you  do  not  insert  line  breaks,  the  text  does  not  wrap  and  may  not  be  seen  if  it 
is  wider  than  the  element. 
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4.   Select  the  settings  for  the  text. 

♦  Click  the  Font  Set  button  and  select  a  font,  style,  and  size. 

♦  Click  the  Color  Set  button  and  select  a  color  in  the  Color  Picker. 

♦  Select  the  Relative  alignment,  Horizontal  position,  and  Vertical  position  for 
the  text. 

The  Relative  alignment  left-aligns,  centers,  or  right-aligns  two  or  more  lines 
of  text.  It  has  no  effect  on  single  lines  of  text. 

The  Horizontal  position  and  Vertical  position  settings  position  the  text 
within  the  object  frame. 


HR 

FAQ 


HR 
FAQ 


On  the  left,  Relative  alignment  is  set  to  Left, 
Horizontal  position  and  Vertical  position  are 
set  to  Center.  On  the  right,  Relative  alignment 
is  set  to  Center,  Horizontal  position  to  Left,  and 
Vertical  position  to  Center 


To  specify  multiple  lines  of  text  in  a  SiteStyle  banner  or  button,  use  the  Custom 
Names  dialog  as  described  in  "Using  Custom  Button  and  Banner  Names  and 
File  Extensions"  on  page  43. 

5.  In  the  Orientation  section,  move  the  slider  to  rotate  the  text. 

Select  Right  angles  to  limit  the  text  rotation  to  90-degree  increments. 

6.  Click  Close  to  apply  the  text  settings  to  the  text. 


Creating  and  Editing  Fields 

Fields  contain  variable  text  that  is  subject  to  change,  such  as  the  date  and  time  the 
site  was  created  or  last  modified,  the  site  name  and  author,  and  so  on.  NetObjects 
Fusion  includes  several  fields  you  can  use  or  you  can  define  your  own. 

Inserting  an  Existing  Field 

1 .  In  Page  view,  double-click  the  text  box  and  position  the  insertion  point  where 
you  want  to  insert  the  field. 

2.  From  the  Text  menu,  choose  Insert  Field. 
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The  Insert  Field  dialog  appears 


Ivpe: 
Field:  m 


Site  Created 
Site  Modified 
Site  Generated 


Date  &  Time  Format. 


j 


Monday,  November  15, 1999 


pValue- 
Mondc 


3.   Select  the  type  of  field  you  want  to  insert  from  the  Type  drop-down  list. 

If  you  select  Date  &  Time,  click  Date  &  Time  Format,  select  a  format  from  the 
list  in  the  Date  &  Time  Format  dialog,  and  click  OK. 


Note:  Once  you  publish  the  site,  the  date  on  the  final  HTML  page  does  not  change 
automatically.  It  only  changes  if  you  modify  the  site  in  NetObjects  Fusion  and 
publish  again.  This  is  true  of  all  variables. 

If  you  select  Site  &  General  and  choose  Author,  you  must  type  the  author's 
name  on  the  META  tags  tab  of  the  Current  Site  Options  dialog.  See  "Entering 
META  Tags"  on  page  49. 

4.  Select  the  specific  field  to  insert  from  the  Field  list. 

5.  Click  OK  in  the  Insert  Field  dialog. 

Creating  a  User-Defined  Variable 

A  user-defined  variable  is  text  or  a  phrase  that  is  subject  to  change.  For  example,  if 
you  need  to  refer  to  quarterly  sales  figures,  you  can  create  a  user-defined  variable 
and  insert  the  number  as  a  field.  As  the  figure  changes  each  quarter,  you  can  edit  the 
field  as  described  in  "Editing  a  Variable"  on  page  444,  and  NetObjects  Fusion 
automatically  updates  the  name  wherever  it  appears  in  your  site.  You  can  only 
create  plain  text  variables.  You  cannot  reference  internal  NetObjects  Fusion  fields, 
such  as  page  names,  asset  names,  or  object  properties. 
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1.  In  Page  view,  double-click  the  text  box  where  you  want  to  insert  a  user-defined 
variable. 

2.  From  the  Text  menu,  choose  Insert  Field. 
The  Insert  Field  dialog  appears. 

3.  Select  User-Defined  Variable  from  the  Type  drop-down  list. 

4.  Click  New. 

The  New  Variable  dialog  appears. 


New  Variable 

Variable  name 

1 

Value 

□  K 

Cancel  | 

5.  Type  a  name  and  value  for  the  field  and  click  OK. 

The  field  appears  highlighted  in  the  Field  list  of  the  Insert  Field  dialog. 

6.  Click  OK. 

Checking  Spelling 

You  can  check  the  spelling  of  English  language  words  in  NetObjects  Fusion.  You 
can  add  words  to  a  personal  dictionary  so  they  will  no  longer  be  flagged  as 
misspelled.  Your  personal  dictionary  is  a  simple  text  file,  so  you  can  use  any  text 
editor  to  add  or  delete  words.  You  can  check  spelling  throughout  an  entire  site,  on 
selected  pages,  or  on  a  single  page. 

If  smart  spell  check  is  turned  on,  once  NetObjects  Fusion  checks  spelling  in  a  text 
block,  it  does  not  check  the  same  text  again  unless  you  modify  the  text  or  turn  off 
smart  spell  check.  See  "Setting  Text  Options"  on  page  23. 

1 .  Go  to  Site  view  or  Page  view. 

2.  From  the  Tools  menu,  choose  Spell  Check. 
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3.  Select: 

♦  Entire  Site  to  check  the  spelling  of  text  on  all  pages  in  the  site. 

♦  Selected  Pages  to  check  the  spelling  of  text  on  the  pages  selected  in  Site  view. 

♦  Current  Page  to  check  the  spelling  of  text  only  on  the  page  displayed  in  Page 
view. 

If  NetObjects  Fusion  does  not  recognize  a  word,  it  displays  it  in  the  Not  in 
Dictionary  field  of  the  Spelling  dialog. 

Email  addresses  and  URLs  are  not  checked. 


Not  in  Dictionary:  Itexty 
Change  to:  |tewt 
Suggestions: 


4.  Click: 


♦  Options  to  choose  a  language,  and  to  choose  a  location  for  your  personal 
dictionary. 

♦  Ignore  to  skip  this  instance  of  the  word. 

♦  Ignore  All  to  skip  all  instances  on  this  page. 

♦  Change  to  replace  this  instance  with  the  word  in  the  Change  to  field. 

♦  Change  All  to  replace  all  instances  on  this  page  with  the  word  in  the  Change 
to  field. 

♦  Add  to  put  the  word  in  your  personal  dictionary. 

♦  Suggest  to  see  alternate  spellings  for  the  word.  Double-click  a  suggestion  to 
use  it. 


♦  Cancel  to  cancel  the  spelling  check. 
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Finding  Text 

1 .  Go  to  Site  view  or  Page  view. 

2.  From  the  Edit  menu,  choose  Find. 
The  Find  and  Replace  dialog  appears. 

3.  In  the  Find  in  field,  select  a  scope  for  the  search. 

The  options  vary  depending  on  the  current  view  and  the  selected  object. 
Select: 

♦  Entire  site  to  search  all  text  in  the  site 

♦  Selected  pages  to  search  text  on  the  pages  selected  in  Site  view. 

♦  Current  page  to  search  text  on  the  page  currently  displayed  in  Page  view. 

♦  Current  text  box  to  search  text  in  the  text  box  currently  selected  in  Page  view. 

♦  Selected  text  to  search  only  the  text  currently  selected  in  Page  view. 

4.  In  the  Find  what  field,  type  the  word,  letters,  or  phrase  you  want  to  find. 

5.  Select  options  to  narrow  the  search. 

6.  Click  Find  Next. 

NetObjects  Fusion  searches  for  the  text. 

Replacing  Text 

1 .  Go  to  Site  view  or  Page  view. 

2.  From  the  Edit  menu,  choose  Replace. 
The  Find  and  Replace  dialog  appears. 

3.  In  the  Find  in  field,  select  a  scope  for  the  search. 

The  options  vary  depending  on  the  current  view  and  the  selected  object. 
Select: 

♦  Entire  site  to  search  all  text  in  the  site 

♦  Selected  pages  to  search  text  on  the  pages  selected  in  Site  view. 

♦  Current  page  to  search  text  on  the  page  currently  displayed  in  Page  view. 
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♦  Current  text  box  to  search  text  in  the  text  box  currently  selected  in  Page  view. 

♦  Selected  text  to  search  only  the  text  currently  selected  in  Page  view. 

4.  In  the  Find  what  field,  type  the  word,  letters,  or  phrase  you  want  to  replace. 

5.  In  the  Replace  with  field,  type  the  replacement  text. 

6.  Select  options  to  narrow  the  search. 

7.  Click  Find  Next. 

8.  Click  Replace  to  replace  the  found  text,  or  click  Replace  All  to  replace  all 
instances  of  the  text  with  the  replacement  text. 

Counting  Words,  Lines,  Paragraphs,  and  Characters 

Z)  To  get  a  count  for  the  current  page,  in  Page  view,  choose  Word  Count  from  the 
Tools  menu. 


Page  Word  Count 

■  || 

Word  count 

19 

Line  count 

5 

Paragraph  count 

1 

Character  count 

126 

|i  OK 

I 

If  the  text  box  includes  embedded  objects,  the  line  count  is  incremented  for  each 
embedded  object. 
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Placing  Pictures 

You  can  enhance  your  pages  by  placing  pictures  in  the  Layout  area  and 
MasterBorder.  This  chapter  tells  how  to  add  pictures  and  modify  their  size  and 
appearance. 

This  chapter  describes: 

♦  Choosing  an  image  format 

♦  Adding  a  picture 

♦  Resizing  a  picture 

♦  Auto-generated  images 

♦  Cropping  a  picture 

♦  Tiling  a  picture 

♦  Rotating  a  picture 

♦  Creating  a  border  around  a  picture 

♦  Creating  a  transparent  GIF 

♦  Adding  text  to  a  picture 
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Choosing  an  Image  Format 

To  display  a  picture,  most  browsers  require  the  picture  to  be  stored  in  one  of  the 
following  Web-standard  formats: 

♦  Joint  Photographic  Experts  Group  (jpg)  supports  24-bit  true  color. 

♦  Graphics  Interchange  Format  (.gif)  supports  8-bit,  256-color  images. 
NetObjects  Fusion  also  supports  GIF  89,  a  format  for  transparency,  interlacing, 
and  animation,  as  well  as  animated  .gifs.  An  animated  .gif  file  contains  multiple 
images  that  a  browser  plays  in  sequence,  adding  movement  to  your  pages 
without  browser  plugins. 

♦  Portable  Network  Graphics  (.png)  supports  any  color-depth  image.  To  view 
.png  images  with  Netscape  Navigator  4.0,  the  PNG  Live  2.0  plugin  is  required; 
Microsoft  Internet  Explorer  4.0  does  not  require  a  plugin.  Earlier  versions  of 
both  browsers  require  PNGLive  1.0  to  view  the  image.  You  can  find  this  plugin 
at  http://home.netscape.com/plugins/image_viewers.html. 

If  you  try  to  place  a  picture  that  is  in  .bmp,  .pcx,  .pet,  or  .psd  format,  NetObjects 
Fusion  offers  to  convert  it  to  .gif  or  .jpg  format.  NetObjects  Fusion  copies  the  file, 
converts  the  copy,  and  stores  the  copy  in  the  site's  \Assets  folder. 

If  you  are  using  Windows  NT,  you  can  use  the  Picture  tool  to  place  Flashpix  (.fpx) 
images.  You  can  also  use  the  Media  Plug-in  tool,  as  described  in  "Inserting  Other 
Types  of  Files"  on  page  302,  to  place  an  .fpx  file  in  Windows  95,  Windows  98,  or 
Windows  NT. 


Picture  tool 


Adding  a  Picture 


1.  In  Page  view,  choose  the  Picture  tool  from  the  Standard  toolbar,  and  click  where 
you  want  to  position  the  upper  left  corner  of  the  picture. 

The  Picture  File  Open  dialog  appears. 

2.  Select  the  image  file  you  want  from  your  hard  disk  or  LAN,  or  select  an  image 
already  in  use  in  the  site  from  the  Image  Assets  tab.  See  Chapter  28,  "Managing 
Assets." 

You  cannot  set  the  palette,  color  depth,  or  compression  scheme  of  an  image  in 
NetObjects  Fusion.  If  these  options  are  important  to  your  design,  edit  the  file  in 
an  image  editing  application  and  then  place  it  in  your  site. 
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From  the  Files  of  type  drop-down  list,  select: 

♦  Web  Images,  to  see  a  list  of  all  image  files  that  can  be  viewed  in  a  Web 
browser,  including  .gif,  jpg,  and  .png. 

♦  A  specific  file  type,  to  see  only  files  of  that  type.  You  can  select  GIF,  JPEG, 
PNG,  BMP,  PCX,  PICT,  or  FPX. 

♦  All  Images,  to  view  all  files  that  are  image  files. 

♦  All  Files,  to  see  all  files  in  the  selected  folder. 

3.   Make  sure  Show  thumbnail  image  is  selected  if  you  want  to  preview  your  image 
in  the  dialog. 


-3  o\f~m 


mission,  jpg 

1  1 

g".png| 

Cancel 

Thumbnail  image 


Show  thumbnail 
image  check  box 


4.   Click  Open  to  place  the  image  on  the  page. 

If  you  select  a  non-standard  Web  format,  the  Unsupported  File  Format  dialog 
appears. 


Unsupported  File  Format 


The  selected  image  file  is  not  supported  by  most  Web 
Browsers.  You  may  convert  the  file  to  either  GIF  or 
JPEG  format.  The  original  file  will  not  be  changed. 


■*  !!■:■[.  en  "jlF  hie 
C  Convert  to  JPG  file 
C  Do  not  convert  file 


♦  If  you  convert  to  .gif,  NetObjects  Fusion  reduces  the  image  to  256  colors. 

♦  If  you  convert  to  jpg,  NetObjects  Fusion  retains  the  color  information  from 
the  original  file. 
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♦  If  you  choose  not  to  convert,  NetObjects  Fusion  positions  the  image  in 
HTML  using  the  <EMBED>  tag.  Only  browsers  that  have  the  appropriate 
plugin  installed  can  view  the  image. 

5.   Choose  the  appropriate  conversion  format  and  click  OK.  NetObjects  Fusion 
copies  the  file,  converts  the  copy,  and  stores  the  copy  in  the  site's  \Assets  folder. 
Both  the  original  file  and  the  copy  are  listed  in  Assets  view.  Only  the  converted 
copy  is  required  for  your  site,  so  you  can  delete  the  original  file. 

If  the  file  is  in  a  supported  format,  the  file  is  not  copied  and  it  remains  in  its 
original  location. 

The  picture  and  Picture  Properties  palette  appear. 
333 


Picture  Properties 


a  ]b]o 


File:  | \TutoriaKmission.jpg  Browse... 
AltTag:  | 

Display 

f*  Normal 

C  Stretch 

C  Tile 


|     Show  hotspots 
Link...  Anchor... 


6.   Type  a  description  of  the  picture  in  the  AltTag  field. 
See  "Adding  and  Modifying  Alt  Tags"  on  page  80. 


Resizing  a  Picture 

When  you  resize  a  picture  and  publish  the  site,  NetObjects  Fusion  changes  the 
HTML  <HEIGHT>  and  <WIDTH>  attributes  of  the  image,  so  the  file  is  displayed 
in  the  new  size.  Your  original  file  is  unchanged,  included  among  the  site  assets,  and 
used  on  the  page.  To  change  an  image's  file  size,  you  must  use  an  image  editing 
application. 

1.  In  Page  view,  select  the  picture  you  want  to  resize. 
The  Picture  Properties  palette  appears. 
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2.  Set  the  picture's  Display  property  to  Stretch. 

3.  Drag  any  handle  until  the  picture  is  the  size  you  want.  To  size  the  picture 
proportionally,  hold  down  the  Ctrl  key  as  you  drag  a  corner  handle. 

To  return  the  selected  picture  to  its  original  size,  either: 

♦  Set  the  picture's  Display  property  to  Normal. 

♦  From  the  Object  or  shortcut  menu,  choose  Restore  Original  Size. 

Auto-generated  Images 

When  you  add  an  image  to  a  SiteStyle,  crop  an  image,  tile  an  image,  rotate  an  image, 
create  a  transparent  GIF,  or  add  text  to  a  shape  or  picture,  NetObjects  Fusion 
generates  a  new  file,  referred  to  as  an  auto-generated  image. 

In  most  cases,  the  names  of  these  auto-generated  images  include  the  original  file 
name  preceded  by  a_.  For  example,  if  you  crop  an  image  named  camping.gif, 
NetObjects  Fusion  generates  a  cropped  version  of  the  image  named  a_camping.gif. 

These  auto-generated  images  are  listed  in  Publish  view.  If  you  retain  the  default  by 
Asset  Type  file  arrangement  when  you  publish,  NetObjects  Fusion  saves  these 
images  in  the  assets\images\autogen  folder. 

The  original  image  is  unchanged  and  is  listed  in  Assets  view. 

Cropping  a  Picture 

You  can  crop  a  picture  to  make  only  part  of  it  visible.  When  you  publish  the  site, 
NetObjects  Fusion  generates  a  new  file  listed  in  Publish  view  with  a  new  name  as  an 
auto-generated  image.  Your  original  file  is  unchanged  and  included  among  the  site 
assets.  The  auto-generated  file  is  included  in  the  published  site  on  the  server. 

1.  In  Page  view,  select  the  picture  you  want  to  crop. 

2.  Set  the  picture's  Display  property  to  Normal. 

3.  Drag  any  selection  handle  to  reduce  the  size  of  the  box  enclosing  the  picture. 
NetObjects  Fusion  crops  the  bottom  and  right  sides  of  the  picture. 
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Tiling  a  Picture 

You  can  create  multiple  instances  of  a  picture  by  tiling  it.  When  you  publish  the 
site,  NetObjects  Fusion  generates  a  new  file  listed  in  Publish  view  with  a  new  name 
as  an  auto-generated  image.  Your  original  file  is  unchanged  and  included  among 
the  site  assets.  The  new  file  is  included  in  the  published  site  on  the  server. 

1.  In  Page  view,  select  the  picture  you  want  to  tile. 
The  Picture  Properties  palette  appears. 

2.  Set  the  picture's  Display  property  to  Tile. 

3.  Drag  a  selection  handle  to  enlarge  the  box  and  display  more  or  fewer  tiled 
images. 

NetObjects  Fusion  displays  multiple  images  of  the  picture  in  the  box.  Each 
image  is  the  size  of  the  picture  in  the  source  file. 

Rotating  a  Picture 

You  can  rotate  pictures  in  90-degree  increments.  When  you  rotate  a  picture  and 
publish  the  site,  NetObjects  Fusion  generates  a  new  file  listed  in  Publish  view  with  a 
new  name  as  an  auto-generated  image.  Your  original  file  is  unchanged  and  included 
among  the  site  assets.  The  new  file  is  included  in  the  published  site  on  the  server. 

1.  In  Page  view,  select  the  picture  you  want  to  rotate. 
The  Picture  Properties  palette  appears. 

2.  Click  the  Effects  tab. 
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3.   In  the  Rotate  field,  select  the  desired  rotation. 


Picture  Properties 


□    |o  I 


Picture  rotated  90  degrees 


^|  |~  Use  color  [■ 


Tent  in  element  - 


I-  Enable  Settings... 


Rotate  [90~^     Border  [o 


Creating  a  Border  Around  a  Picture 

You  can  use  the  Picture  properties  to  add  a  border  around  a  picture. 

1.  In  Page  view,  select  the  picture  for  which  you  want  to  create  a  border. 
The  Picture  Properties  palette  appears. 

2.  Click  the  Effects  tab. 

3.  In  the  Border  field,  specify  the  thickness  of  the  border. 

The  border  color  is  controlled  by  the  site  visitor's  browser  and  the  page  text  color 
settings.  Check  the  border  appearance  in  the  appropriate  browsers  before 
publishing  your  site. 
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Creating  a  Transparent  GIF 

When  you  place  a  .gif  image  on  a  page,  you  can  make  every  pixel  of  one  color 
transparent.  Although  only  part  of  the  image  is  transparent,  it  is  called  a  transparent 
.gif.  You  can  use  transparent  .gifs  to  blend  an  image  background  with  the  page 
background,  or  to  silhouette  an  image  against  the  page  background. 


Ordinary  .gif 


Page  background  shows  through 
transparent  .gif 

An  image  with  a  solid  background  works  best  because  only  pixels  of  exactly  the 
same  color  can  be  transparent.  If  the  image  background  is  dithered,  it  contains 
several  colors. 


Note:  Transparency  only  works  with  .gifs.  You  cannot  set  a  transparency  for  a  .jpg  or  other 
image  file  format. 

When  you  use  transparency,  NetObjects  Fusion  generates  an  auto-generated  image 
with  a  new  name.  Your  original  file  is  unchanged  and  included  among  the  site 
assets.  The  new  file  is  included  in  the  published  site  on  the  server. 

To  create  a  transparent  .gif: 

1.  In  Page  view,  select  the  picture  for  which  you  want  to  create  a  transparent  .gif. 
The  Picture  Properties  palette  appears. 

2.  Click  the  Effects  tab. 

3.  Click  the  Transparency  dropper,  then  click  the  color  in  the  picture  that  you 
want  to  make  transparent. 

The  Use  color  check  box  is  selected,  and  NetObjects  Fusion  displays  the  color 
you  selected  in  the  box  next  to  it. 

4.  To  make  a  transparent  color  opaque,  clear  the  Use  color  check  box. 
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Adding  Text  to  a  Picture 

You  can  add  text  to  a  picture  and  format  its  font,  size,  and  alignment.  The  text  you 
add  becomes  part  of  a  new  image  file  when  you  publish  the  page  containing  the 
picture.  When  you  add  text  to  a  picture  and  publish  the  site,  NetObjects  Fusion 
generates  a  new  file  listed  in  Publish  view  as  an  auto -generated  image.  Your  original 
file  is  unchanged  and  included  among  the  site  assets.  The  new  file  is  included  in  the 
published  site  on  the  server.  See  "Adding  Text  to  a  Shape  or  Picture"  on  page  168. 
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Creating  Photo  Galleries 

Using  the  Photo  Gallery  tool,  you  can  quickly  create  sophisticated  Web  photo 
albums.  You  assemble  your  digital  images,  add  captions  and  descriptions,  and 
choose  from  an  assortment  of  high-quality  thumbnail  and  photo  frames.  Your 
images  look  great  on  the  Web  and  download  quickly. 

This  chapter  describes: 

♦  Adding  galleries 

♦  Working  with  photos 

♦  Adding,  editing,  and  formatting  titles  and  captions 

♦  Controlling  download  time 

♦  Formatting  the  thumbnail  page 

♦  Formatting  photo  pages 
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About  Photo  Galleries 


Each  photo  gallery  you  add  to  your  site  includes  two  types  of  pages — a  thumbnail 
page  and  photo  pages. 

♦  The  thumbnail  page  shows  a  small  image  of  each  photo  in  the  gallery  displayed 
in  a  template  that  you  select.  Site  visitors  click  a  thumbnail  image  to  see  the 
photo  page. 


i  I"1?0!  i  li  i  i  i  i  i  i  i  i  i  i  i  I3?0,  H?°  I51?0, 


Hiking 


j 
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When  you  add  a  photo  gallery  object  to  the  thumbnail  page,  NetObjects  Fusion 
automatically  adds  the  photo  page  for  you.  On  the  Site  Navigation  palette,  the 
photo  page  is  as  a  single  icon  that  contains  multiple  pages. 


Site  Navigation 


H-]x] 


Q  Home 

Mission 
^  Events 

Activities 

Hiking   

;  n  Yosemite  ■ 

O  Highlights 
^  Next  Tour 
B-O  Contest 

■  ^  Wonder  Lodge 


Thumbnail  page 
contains  the  photo 
^gallery  object 

■  Photo  page 
contains  a  stack  of 
pages,  one  for 
each  photo 
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Adding  a  Photo  Gallery 


You  can  create  a  new  photo  gallery  or  add  an  existing  photo  gallery  to  your  site.  You 
can  duplicate  an  existing  gallery  or  add  galleries  that  you  removed  from  the  site.  See 
"Removing  a  Photo  Gallery"  on  page  212. 

You  add  the  photo  gallery  object  to  the  page  where  you  want  to  display  thumbnail 
images  of  the  photos  in  the  gallery.  You  can  add  a  new  page  or  use  an  existing  page. 


Photo  Gallery  tool 


Creating  a  New  Photo  Gallery 

1.  In  Page  view,  display  the  page  where  you  want  to  place  the  photo  gallery  object. 
This  is  the  page  where  the  thumbnail  images  appear. 

2.  Choose  the  Photo  Gallery  tool  from  the  Advanced  toolbar  and  click  in  the  upper 
left  corner  of  the  Layout  area. 

Start  in  the  upper  left  corner  to  allow  as  much  space  as  possible  for  the 
thumbnail  images. 

The  Add  Photo  Gallery  dialog  appears. 

Current  photo  galleries  and  photo  galleries  that  were  added  to  the  site  and  then 
removed  are  listed  in  the  Insert  an  existing  Photo  Gallery  section  at  the  bottom 
of  the  dialog.  If  no  other  galleries  were  created,  you  do  not  see  this  list. 


Add  Photo  Gallery 


Please  provide  a  name  for  your  Photo  Gallery.  This  will  be 
used  to  save  the  gallery  in  case  you  delete  it  and  would 
like  to  reuse  it  at  a  later  time. 


Name:  |Yosemite 


□  K    |     Cancel  | 


Current  photo  galleries  and  photo  galleries 
that  were  added  to  the  site  and  then 
removed  are  listed  in  the  Insert  an  existing 
Photo  Gallery  section  as  shown  at  the  right. 
If  no  other  galleries  were  created,  you  see 
the  dialog  above. 


Add  Photo  Gallery 


2^1 


Please  choose  whether  to  create  a  new  Photo  Gallery  or 
insert  a  saved  Photo  Gallery. 

(*   Create  a  new  Photo  Gallery 
Name:  |~~ 

Insert  an  existing  Photo  Gallery 


Name 


Yosemite 
NewYosemite 
NewGallery 
Yosemite2 


Created 


5/2/2002 
5/3/2002 
5/3/2002 
5/4/2002 


j     Cancel  | 


3.   Type  a  name  for  the  new  photo  gallery. 

NetObjects  Fusion  uses  the  name  you  enter  as  the  name  of  the  photo  page.  This 
name  appears  in  the  banner  at  the  top  of  each  photo  page.  You  can  rename  the 
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page  in  Site  view  just  as  you  rename  any  other  page,  or  you  can  display  the 
photo  title  in  the  banner  or  edit  the  text  on  the  Banner  Properties  palette.  See 
"Renaming  Pages"  on  page  42,  "Selecting  a  Photo  Page  Layout"  on  page  210,  or 
"Changing  the  Banner  Text"  on  page  267. 

You  cannot  use  the  name  of  an  existing  photo  gallery. 

4.   Click  OK. 

Inserting  an  Existing  Photo  Gallery 

1 .   Display  the  designated  thumbnail  page  in  Page  view. 


7~j  2.   Choose  the  Photo  Gallery  tool  from  the  Advanced  toolbar  and  click  in  the  upper 

-->  I  left  corner  of  the  Layout  area. 

Photo  Gallery  tool  Start  in  the  upper  left  corner  to  allow  as  much  space  as  possible  for  the 

thumbnail  images. 

The  Add  Photo  Gallery  dialog  appears. 

Available  photo  galleries  are  listed  in  the  Insert  an  existing  Photo  Gallery  section 
at  the  bottom  of  the  dialog. 

3.  Select  Insert  an  existing  Photo  Gallery. 

4.  Select  the  gallery  you  want  to  insert  and  click  OK. 

Working  with  Photos 

NetObjects  Fusion  creates  two  copies  of  each  image  file — one  for  the  thumbnail 
page  and  one  for  the  photo  page.  These  copies  are  published  when  you  publish  the 
site;  the  files  are  generally  much  smaller  than  the  original  image  file.  NetObjects 
Fusion  does  not  change  your  original  image  file. 

The  photo  gallery  is  designed  to  work  best  with  digital  photos.  However,  you  can 
use  scanned  photos  as  well.  When  scanning,  make  sure  you  make  the  scan  larger 
than  necessary. 
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Adding  Photos 

You  add  photos  on  the  Images  tab  of  the  Photo  Gallery  Properties  Editor. 
1.   Open  the  Photo  Gallery  Properties  Editor.  You  can: 

♦  Add  a  photo  gallery  by  following  the  steps  in  "Adding  a  Photo  Gallery"  on 
page  190. 

♦  Double-click  a  photo  on  a  thumbnail  page  or  a  photo  page. 

The  Photo  Gallery  Properties  Editor  appears,  displaying  the  Images  tab. 


Photo  Gallery  Properties  Editor:  My  Gallery 


Images  j  Thumbnail  Page  j  Photo  Page  | 
Images  in  display  order:  (0  images  in  gallery) 


File  Name 

Title 

Move  Up 


Caption: 


Thumbnail  Image 

Preview: 


Photo  Image  j 

Output  Settings  - 


File  type:  |  JPEG  _J 
Quality:     |  High 


3 


~rj  Percent 


Approximate  download  time: 


sec@  |  56.6  Kbps  3 


Rotate:  0"  (no  rotation] 


Apply  to  All 


2.  Click  Add. 

The  Open  dialog  appears. 

3.  Navigate  to  the  folder  containing  the  photos  you  want  to  add  to  the  gallery. 

4.  Select  the  photos  for  the  gallery.  You  can: 

♦  Click  a  single  photo  to  select  it. 

♦  Press  Shift+Click  or  Ctrl+Click  to  select  multiple  photos. 
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♦  Press  Ctrl+A  to  select  all  photos  in  the  folder. 


Look  in:  |  Q  Photo  Gallery 


Zl  <>  s  &  nnn- 


|  "Carnpsite.jpg"  "Falls.jpg"  "Guides.jpg"  "HalfDoi 

□  pen  | 

[image  Files  (*.gifAjpg,K.jpeg,K.tiff,*.bmp,*.pcx 

Cancel 

Tip:  To  select  multiple  images,  press  Shift+Click  or  Ctrl+Click;  to 
select  all  images,  press  Ctrl+A. 


Click  Open. 

The  photos  you  select  are  listed  in  the  File  Name  column  on  the  Images  tab. 


Photo  Gallery  Properties  Editor:  My  Gallery 


Images  j  Thumbnail  Page  j  Photo  Page  | 
Images  in  display  order:  (4  images  in  gallery) 

Add 


File  Name 

Title 

Falls.jpg 

Guides.jpg 

HalfDorne.jpg 

Remove 


Move  Up 


Caption: 


- 


Arranging  Photos 


Photos  are  listed  in  the  File  Name  column  on  the  Images  tab  of  the  Photo  Gallery 
Properties  Editor  in  the  order  in  which  you  add  them  to  the  gallery.  This  is  also  the 
order  in  which  they  appear  on  the  photo  pages.  If  you  select  several  files  from  a 
folder,  they  appear  in  alphabetical  order.  This  is  probably  not  the  order  in  which 
you  want  to  display  the  photos,  so  you  must  rearrange  them. 

You  can  rearrange  the  photos  on  the  Images  tab  of  the  Photo  Gallery  Properties 
Editor,  or  directly  on  the  thumbnail  page.  If  you  do  this  on  the  thumbnail  page,  you 
can  see  the  images  as  you  arrange  them.  This  is  useful  if  your  photos  do  not  have 
meaningful  file  names,  for  example  Ol.jpg,  02.jpg. 
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Dragging  Photos  on  the  Thumbnail  Page 

1.  Display  the  thumbnail  page  in  Page  view. 

2.  Click  the  image  you  want  to  move  and  drag  it  to  a  new  position. 
A  red  indicator  shows  where  the  image  will  be  placed. 


1  - 

M 

.  i      i«  J 

m 

1  10 

Click  the  photo  in  the  upper  left  and 
drag  it  to  the  right 


When  you  release  the  mouse  button, 
the  photo  moves  into  the  new  position 


If  your  gallery  has  many  photos,  they  will  be  easier  to  organize  if  you  can  see  all  the 
images  in  Page  view  without  scrolling.  To  see  as  many  images  as  possible,  reduce  the 
size  of  the  thumbnail,  select  a  template  that  has  a  thin  frame  (for  example,  Simple 
border),  and  increase  the  number  of  columns.  When  the  images  are  organized  as 
you  want  them,  select  the  template  you  want  to  use,  change  the  number  of  columns, 
and  then  resize  the  thumbnails.  See  "Resizing  Photos"  on  page  195  and  "Formatting 
the  Thumbnail  Page"  on  page  207. 

Moving  Photos  on  the  Images  Tab 

1 .  In  Page  view,  display  the  thumbnail  page  or  a  photo  page  of  the  gallery  you  want 
to  work  with. 

2.  Open  the  Photo  Gallery  Properties  Editor. 

3.  Display  the  Images  tab. 

4.  In  the  File  Name  column: 

♦  Select  a  photo  and  drag  it  into  a  new  position  in  the  list. 
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An  indicator  displays  as  you  move  the  photo. 


File  Name 

Title 

Campsite,  jpg 

Falls.jpg 

Guides,  jpq 

iHalfDom^jjjg 

♦  Select  a  photo  and  click  Move  Up  or  Move  Down  to  shift  it  into  the  proper 
position. 

Resizing  Photos 

You  can  increase  or  decrease  the  size  of  the  thumbnail  images  or  the  size  of  an 
individual  photo  page  image  or  all  the  photo  page  images.  NetObjects  Fusion 
retains  the  image's  proportions  when  you  resize. 

Note:  Some  templates  do  not  allow  the  photos  to  be  resized.  If  you  want  to  resize  photos, 
you  must  select  another  template. 

To  resize  photos: 

1.  In  Page  view,  display  the  thumbnail  page  or  the  photo  page  of  the  gallery  you 
want  to  work  with. 

2.  Click  an  image. 

The  properties  palette  appears. 


Thumbnail  Properties 


-  Proportional  Dimension  — 
Width: 


Apply  to  all  j 


File  Size 
2,0  KB 


To  set  or  change  the  options  for  this 
thumbnail,  double-click  it  or  click 
Configure. 


Configure...  j 


Photo  Properties 


m  | 


-  Proportional  Dimension  - 
Width: 

— J  


Apply      j     Apply  to  all  j 


File  Size 
10.5  KB 


To  set  or  change  the  options  for  this 
photo,  double-click  it  or  click 
Configure. 


Configure...  | 


3.   Resize  the  image. 
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You  can  change  the  image  size  by  dragging  the  slider  on  the  properties  palette, 
by  entering  the  width  directly  in  the  properties  palette,  or  by  dragging  the 
image. 

♦  To  change  the  image  size  by  dragging,  select  the  image  and  drag  the  small 
white  box  until  the  image  is  the  size  you  want. 


Drag  this  box  to  change 
the  size  of  the  image 


When  you  release  the  mouse  button,  the  image  is  resized.  If  you  are  on  the 
thumbnail  page,  all  images  are  resized. 

♦  To  change  the  image  size  by  dragging  the  slider  on  the  properties  palette: 

Drag  the  slider  on  the  properties  palette  to  the  right  to  increase  the  image 
size,  or  to  the  left  to  decrease  the  size.  A  dotted  line  rectangle  increases  or 
decreases  proportionally  as  you  drag  and  the  size  of  the  image  is  displayed  in 
a  ScreenTip. 


m  | 


Proportional  Dimension  — 
Vidth: 

-J  


'   |l54x  W2\ 


y  to  all  | 


File  Size 
3.3  KB 


To  set  or  change  the  options  for  this 
thumbnail,  double-click  it  or  click 
Configure. 


Configure...  j 
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When  the  image  is  the  size  you  want,  release  the  mouse  button. 

♦  To  change  the  image  size  by  entering  the  width  directly  in  the  Thumbnail 
Properties  palette,  type  a  number  in  the  Width  field. 

4.  Apply  the  change. 

♦  If  you  are  on  the  thumbnail  page,  click  Apply  to  all  to  resize  all  thumbnail 
images. 

♦  If  you  are  on  a  photo  page,  click  Apply  to  resize  only  the  current  photo  or 
Apply  to  all  to  resize  all  photos  in  the  gallery. 

Removing  Photos 

You  can  remove  photos  from  the  gallery  on  the  thumbnail  page,  on  the  photo  page, 
or  on  the  Images  tab  of  the  Photo  Gallery  Properties  Editor. 

Removing  a  Thumbnail 

1 .  In  Page  view,  display  the  thumbnail  page  of  the  gallery. 

2.  Select  the  image  you  want  to  remove  and  press  Delete. 

Removing  a  Photo  Page 

1 .   In  Page  view,  display  the  photo  page  containing  the  photo  you  want  to  remove 
from  the  gallery. 

71  2.   Click  the  Delete  button  on  the  control  bar. 

  3.   Click  Yes  to  confirm  deletion. 

Delete 

Removing  Photos  from  the  Images  Tab 

1 .  In  Page  view,  display  the  thumbnail  page  or  a  photo  page  of  the  gallery  you  want 
to  work  with. 

2.  Open  the  Photo  Gallery  Properties  Editor. 

3.  Display  the  Images  tab. 

4.  In  the  File  Name  column,  select  a  photo  and  click  Remove. 
Click  Remove  All  to  remove  all  photos  from  the  gallery. 
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Opening  the  Photo  Gallery  Properties  Editor 

The  tab  you  see  when  you  open  the  Photo  Gallery  Properties  Editor  depends  on 
how  you  open  it. 

♦  If  you  double-click  a  photo  on  a  thumbnail  page  or  photo  page,  the  editor  opens 
showing  the  Images  tab  with  the  photo  you  clicked  selected. 

♦  If  you  double-click  a  thumbnail  frame,  the  editor  opens  showing  the  Thumbnail 
Page  tab. 

♦  If  you  double-click  a  photo  frame,  the  editor  opens  showing  the  Photo  Page  tab. 

♦  If  you  click  the  Configure  button  on  the  Photo  Gallery  Properties  palette  on  the 
thumbnail  page,  the  editor  opens  to  the  Thumbnail  Page  tab. 

♦  If  you  click  the  Configure  button  on  the  Photo  Gallery  Properties  palette  on  a 
photo  page,  the  editor  opens  to  the  Photo  Page  tab. 

Adding  and  Editing  Photo  Titles  and  Captions 

A  title  and  descriptive  caption  help  site  visitors  enjoy  your  photos.  You  can  add  this 
text  on  the  Images  tab  of  the  Photo  Gallery  Properties  Editor  or  directly  on  the  page 
that  features  the  photo.  If  the  selected  thumbnail  template  shows  the  photo  title, 
you  can  add  it  on  the  thumbnail  page. 

Adding  and  Editing  Photo  Titles  and  Captions  on  the  Images  Tab 

1 .  In  Page  view,  display  the  thumbnail  page  or  a  photo  page  of  the  gallery  you  want 
to  work  with. 

2.  Open  the  Photo  Gallery  Properties  Editor. 

3.  Display  the  Images  tab. 

4.  Select  a  photo  in  the  File  Name  column. 

5.  Click  in  the  Title  text  field  and  type  the  title  for  the  photo. 
Try  to  make  your  title  descriptive,  but  brief. 

Text  you  type  here  appears  on  the  photo  page  and  at  the  bottom  of  the 
thumbnail  image  if  the  selected  template  includes  the  photo  title. 
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6.   Click  in  the  Caption  field  and  type  text  that  describes  the  photo.  If  you  do  not 
want  to  add  a  caption,  skip  this  step. 


Photo  Gallery  Properties  Editor:  Yosemite 


Images  j  Thumbnail  Page  j 
Images  in  display  order:  (4  images  in  gallery) 


Photo  Page  | 


File  Name 

Title 

IHalfDome.ipq 

Half  Dome 

Falls.jpg 

Waterfalls 

Campsite,  jpg 

Accommodations 

Guides.jpg 

Mountain  Jacques  Guides 

Title: 

Add 

Half  Dome 

Remove 

Caption: 

Remove  All  | 

Rising  over  4,000  feet  above  the  valley  floor. 

Half  Dome  is  the  most  recognized  symbol  of 

Yosemite. 

Move  Up  | 

Move  Down  | 

Text  you  type  here  appears  on  the  photo  page. 

7.   Click  another  photo  in  the  File  Name  list  to  continue  adding  titles  and  captions, 
or  click  Done  to  close  the  editor. 

To  edit  existing  text,  click  in  the  text  field  and  make  changes.  Be  aware  that  if  you 
formatted  some  or  all  of  the  text  on  the  photo  page,  the  formatting  will  be  lost  if 
you  modify  the  text  on  the  Images  tab  of  the  Photo  Gallery  Properties  Editor. 

For  information  about  formatting  the  title  and  caption  text,  see  "Formatting  Photo 
Titles  and  Captions"  on  page  201. 
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Adding  and  Editing  Photo  Titles  on  the  Thumbnail  Page 

If  the  selected  thumbnail  template  accommodates  a  photo  title,  you  can  enter  it 
directly  on  the  thumbnail  page. 

1.  In  Page  view,  display  the  thumbnail  page  of  the  gallery  you  want  to  work  with. 

2.  Click  in  the  blue  border  at  the  bottom  of  the  thumbnail  image  and  type  the  title 
text. 


Type  the  title  text  here 


To  edit  existing  text,  click  in  the  text  field  and  make  changes. 

For  information  about  formatting  the  title  text,  see  "Formatting  Photo  Titles  and 
Captions"  on  page  201. 
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Adding  and  Editing  Photo  Titles  and  Captions  on  the  Photo  Page 

1.  In  Page  view,  display  the  photo  page  you  want  to  work  with. 

2.  Click  in  the  blue  bordered  title  text  field  and  type  the  title  text. 

3.  Click  in  the  blue  bordered  caption  text  field  and  type  the  caption  text. 


[Type  the  title  text  here 


fTVpe  the  caption  text  herel  I 

To  edit  existing  text,  click  in  the  text  field  and  make  changes. 

For  information  about  formatting  the  title  and  caption  text,  see  "Formatting  Photo 
Titles  and  Captions." 

Formatting  Photo  Titles  and  Captions 

Formatting  Photo  Titles 

You  can  format  all  the  titles  at  once  from  the  Photo  Page  tab  of  the  Photo  Gallery 
Properties  Editor,  or  format  individual  titles  on  the  individual  photo  pages. 


Note:  If  you  specify  formats  and  they  do  not  appear  in  the  text,  it  could  be  caused  by  the  text 
style  definitions,  usually  the  definition  of  the  Body  and  Normal(P)  tags  in  the  SiteStyle. 
For  example,  if  the  Body  tag  defines  the  font  size,  that  definition  overrides  any  font  size 
you  specify  in  the  Object  Format  dialog.  You  can  get  around  this  by  choosing  a  SiteStyle 


201 


Formatting  Photo  Titles  and  Captions 


that  does  not  define  the  property  you  want  to  set,  or  by  formatting  the  individual 
photo  titles.  See  "Formatting  an  Individual  Photo  Title"  on  page  203.  Any  individual 
text  you  format  overrides  the  SiteStyle  definitions. 

Formatting  All  Photo  Titles 

1 .  In  Page  view,  display  the  thumbnail  page  or  a  photo  page  of  the  gallery  you  want 
to  work  with. 

2.  Open  the  Photo  Gallery  Properties  Editor. 

3.  Display  the  Photo  Page  tab. 

4.  Click  Format  Title. 

The  Object  Format  dialog  appears. 


Object  Format 


Character  |  Paragraph  |  Borders  |  Background  | 
Font:  Style: 


_?jx| 


Arial 

Bold 

Automatic 

Automatic 

Agency  FB 

Regular 

Algerian 

Italic  | 

Architect 

Bold  Italic 

D 

■2 

-1  B 

0 

Color:    [Automatic  |  Position: 

Letter  case:  [Automatic  Decoration: 
Small  caps:  [Automatic 


3 


[^Automatic 

□  Underline 

□  □verline 

□  Strikethrough 


T  his  preview  might  not  show  the  format  you'll  see  on  your  page  because  the  tent  might  be 
influenced  by  an  additional  style.  To  learn  about  the  scope  of  styles,  please  see  Help. 


5.   Set  the  text  format.  See  "Formatting  Text"  on  page  144. 
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Formatting  an  Individual  Photo  Title 

You  can  apply  formatting  to  all  or  part  of  the  title  text.  For  example,  you  can  make  a 
single  word  bold  for  emphasis.  Formatting  you  apply  here  is  also  reflected  in  the 
title  text  on  the  thumbnail  page. 

1.  In  Page  view,  display  a  photo  page. 

2.  Click  the  Next  button  on  the  control  bar  until  the  photo  you  want  to  work  on 
appears. 

3.  Select  all  or  part  of  the  title  text. 

4.  Use  the  options  on  the  Format  tab  of  the  Title  Properties  palette  to  format  the 
text.  See  "Formatting  Text"  on  page  144. 


[Type  the  caption  text  here 


Formatting  Photo  Captions 

You  can  format  all  the  captions  at  once  from  the  Photo  Page  tab  of  the  Photo 
Gallery  Properties  Editor,  or  format  individual  captions  on  the  individual  photo 
pages. 


Note:  If  you  specify  formats  and  they  do  not  appear  in  the  text,  it  could  be  caused  by  the  text 
style  definitions,  usually  the  definition  of  the  Body  and  Normal(P)  tags  in  the  SiteStyle. 
For  example,  if  the  Body  tag  defines  the  font  size,  that  definition  overrides  any  font  size 
you  specify  in  the  Object  Format  dialog.  You  can  get  around  this  by  choosing  a  SiteStyle 
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that  does  not  define  the  property  you  want  to  set,  or  by  formatting  the  individual 
photo  titles.  See  "Formatting  an  Individual  Photo  Caption"  on  page  204.  Any  individual 
text  you  format  overrides  the  SiteStyle  definitions. 

Formatting  All  Photo  Captions 

1.  In  Page  view,  display  a  photo  page  of  the  gallery  you  want  to  work  with. 

2.  Open  the  Photo  Gallery  Properties  Editor. 

3.  Display  the  Photo  Page  tab. 

4.  Click  Format  Caption. 

The  Object  format  dialog  appears. 

5.  Set  the  text  format.  See  "Formatting  Text"  on  page  144. 

Formatting  an  Individual  Photo  Caption 

You  can  apply  formatting  to  all  or  part  of  the  caption  text.  For  example,  you  can 
make  a  single  word  bold  for  emphasis. 

1.  In  Page  view,  display  a  photo  page. 

2.  Click  the  Next  button  on  the  control  bar  until  the  photo  you  want  to  work  on 
appears. 

3.  Select  all  or  part  of  the  caption  text. 

4.  Use  the  options  on  the  Format  tab  of  the  Captions  Properties  palette  to  format 
the  text.  See  "Formatting  Text"  on  page  144. 

Formatting  Photo  Thumbnail  Titles 

If  the  selected  thumbnail  template  includes  a  photo  title,  you  can  format  the  title  of 
all  the  photos  at  once  from  the  Thumbnail  Page  tab  of  the  Photo  Gallery  Properties 
Editor,  or  you  can  format  individual  titles  from  the  thumbnail  page. 


Note:  If  you  specify  formats  and  they  do  not  appear  in  the  text,  it  could  be  caused  by  the  text 
style  definitions,  usually  the  definition  of  the  Body  and  Normal(P)  tags  in  the  SiteStyle. 
For  example,  if  the  Body  tag  defines  the  font  size,  that  definition  overrides  any  font  size 
you  specify  in  the  Object  Format  dialog.  You  can  get  around  this  by  choosing  a  SiteStyle 
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that  does  not  define  the  property  you  want  to  set,  or  by  formatting  the  individual 
photo  titles.  See  "Formatting  an  Individual  Thumbnail  Title"  on  page  205.  Any 
individual  text  you  format  overrides  the  SiteStyle  definitions. 

Formatting  All  Thumbnail  Titles 

1 .  In  Page  view,  display  the  thumbnail  page  or  a  photo  page  of  the  gallery  you  want 
to  work  with. 

2.  Open  the  Photo  Gallery  Properties  Editor. 

3.  Display  the  Thumbnail  Page  tab. 

4.  Click  Format  Title. 

5.  Set  the  text  format.  See  "Formatting  Text"  on  page  144. 

Formatting  an  Individual  Thumbnail  Title 

You  can  apply  formatting  to  all  or  part  of  the  title  text.  For  example,  you  can  make  a 
single  word  bold  for  emphasis.  Formatting  you  apply  here  is  also  reflected  in  the 
title  text  on  the  photo  page. 

1 .  In  Page  view,  display  the  thumbnail  page  you  want  to  work  with. 

2.  Click  in  a  title  text  field. 

3.  Use  the  options  on  the  Format  tab  of  the  Title  Properties  palette  to  format  the 
text.  See  "Formatting  Text"  on  page  144. 

Controlling  Download  Time 

When  you  configure  a  photo  gallery,  be  considerate  of  site  visitors  by  minimizing 
the  time  it  takes  for  the  images  to  download.  Image  quality  and  size  both  affect 
download  time.  You  can  use  the  output  settings  in  the  Photo  Gallery  Properties 
Editor  and  the  file  size  information  on  the  properties  palette  to  keep  track  of  and 
adjust  download  time  while  maintaining  image  quality. 

To  control  the  image  format: 

1 .  In  Page  view,  display  the  thumbnail  page  or  a  photo  page  of  the  gallery  you  want 
to  work  with. 

2.  Open  the  Photo  Gallery  Properties  Editor. 

3.  Display  the  Images  tab. 
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The  output  settings  for  thumbnail  images  and  the  photo  images  are  separate. 

4.   Click  the  Thumbnail  Image  tab  or  Photo  Image  tab  at  the  bottom  of  the  Images 
tab. 

Thumbnail  Image  Photo  Image  j 

Preview:  (scaled  to  47%  to  fit)  Output  Settings  — 


File  type:   |  JPEG  _J 

Quality:     |  High        3  |S5  Percent 

Approximate  download  time:  6.9sec@  |  56.6  Kbps 
File  Size:  32.0  KB 


Rotate:  1 0-  (no  rotation)  ^  Apply  to  All  | 


On  these  tabs  you  set  the  quality  of  the  thumbnail  and  photo  images  for  the 
selected  file.  As  you  make  changes,  NetObjects  Fusion  displays  the  approximate 
download  time  for  the  file.  The  options  on  the  Thumbnail  Image  tab  and  the 
Photo  Image  tab  are  the  same. 

5.  Select  the  File  type. 

Most  photos  will  be  JPEG  format. 

6.  Set  the  Quality  and  Percent. 

These  fields  both  affect  image  quality.  100%  is  the  highest  quality,  0%  the  lowest 
quality. 

a.  Set  the  Quality  field  first.  Each  setting  corresponds  to  a  range  of  percents. 
Low  corresponds  to  0-39%,  Medium  to  40-75%,  High  to  76-99%,  and 
Maximum  to  100%. 

b.  Use  the  Percent  field  to  fine-tune  the  quality  setting. 

As  you  adjust  the  settings,  the  image  in  the  Preview  field  changes.  If  the  Preview 
image  is  scaled  down,  you  can  close  the  editor  and  check  image  quality  in  Page 
Design  view. 

7.  Select  a  download  speed. 

The  most  common  download  time  is  56.6. 

8.  To  apply  these  settings  to  all  the  photos  in  the  gallery,  click  Apply  to  All. 
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This  affects  all  thumbnail  images  or  all  photo  images,  depending  on  the  selected 
tab. 

9.   Set  image  rotation.  This  setting  affects  only  the  selected  image. 
To  control  the  image  sizes: 

1 .  In  Page  view,  display  the  thumbnail  page  or  a  photo  page  of  the  gallery  you  want 
to  work  with. 

2.  Select  a  thumbnail  or  photo  image. 

Notice  the  image  size  on  the  properties  palette. 

If  you  selected  a  thumbnail  image,  you  can  choose  to  see  the  size  of  the  current 
image  or  of  all  thumbnail  images. 

3.  Resize  the  image.  See  "Resizing  Photos"  on  page  195. 

As  you  resize,  the  Properties  palette  shows  the  effect  on  the  file  size. 

Formatting  the  Thumbnail  Page 

On  the  thumbnail  page,  you  determine  how  site  visitors  enter  the  photo  gallery. 
You  can  set  up: 

♦  a  text  link  that  visitors  click  to  see  the  first  photo 

♦  thumbnail  size  renderings  of  each  photo  in  the  gallery  so  site  visitors  have  access 
to  individual  photos 

Creating  a  Text  Link  to  a  Photo  Gallery 

You  can  set  up  a  single  text  link  that  site  visitors  click  to  enter  the  photo  gallery. 
This  takes  visitors  to  the  first  photo  in  the  gallery.  They  then  use  the  gallery 
navigation  buttons  to  move  between  pages  in  the  gallery. 

1 .  In  Page  view,  display  the  thumbnail  page  or  a  photo  page  of  the  gallery  you  want 
to  work  with. 

2.  Open  the  Photo  Gallery  Properties  Editor. 

3.  Display  the  Thumbnail  Page  tab. 

4.  In  the  Format  section  of  the  tab,  select  Text  link. 
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5.   In  the  text  field,  type  the  text  you  want  to  link.  The  default  is  the  gallery  name 


Photo  Gallery  Properties  editor:  Gallery 


mages  Thumbnail  Page  j      Photo  Page  | 


I 

Format: 

P  Tent  link:  | Enter  the  GallerJ 
C  Thumbnails 


The  text  link  appears  on  the  thumbnail  page  in  the  format  set  by  the  SiteStyle  for 
linked  text.  See  "Editing  the  Text  Elements  of  SiteStyles"  on  page  242. 


If  you  use  a  text  link,  you  can  place  additional  objects  on  the  thumbnail  page. 

6.   Click  the  Photo  Page  tab  to  continue  formatting,  or  click  Done  to  close  the 
editor. 


Selecting  a  Thumbnail  Template 

To  give  site  visitors  direct  access  to  each  photo  in  the  gallery,  you  can  display  a  small 
version  of  each  photo  on  the  thumbnail  page.  NetObjects  Fusion  provides  a  variety 
of  thumbnail  templates  that  you  can  use  to  format  these  images;  for  example,  one 
template  looks  like  a  film  strip  and  another  like  35mm  slides. 

1 .  In  Page  view,  display  the  thumbnail  page  or  a  photo  page  of  the  gallery  you  want 
to  work  with. 

2.  Open  the  Photo  Gallery  Properties  Editor. 
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3.   Display  the  Thumbnail  Page  tab. 


Photo  Gallery  Properties  Editor:  Yosemite 


mages  Thumbnail  Page  j      Photo  Page  ] 


C  Text  link:  |Yosemite 
(*  Thumbnails 

Template:  |  Film 

Columns:  [4 


Preview:  (scaled  to  fit) 


Film  is  a  good  all-purpose  thumbnail  template  that  mimics  the 
look  of  a  film  strip.  It  works  in  many  different  scenarios. 

•  Allows  thumbnails  to  be  resized  to  any  dimension 

•  Works  against  any  background 

•  Automatically  numbers  each  photo  sequentially 


4.  In  the  Format  section  of  the  tab,  select  Thumbnails. 

5.  Select  a  template  from  the  drop-down  list. 

Options  associated  with  the  selected  template  appear.  For  example,  the  slide 
template  includes  Style  and  Cell  spacing,  as  well  as  the  option  to  include  and 
format  photo  titles. 

Information  about  the  template  and  when  to  use  it  appear  next  to  the  preview 
window. 

6.  Set  the  template  options. 

7.  Specify  the  number  of  columns  you  want  to  include  on  the  thumbnail  page. 

For  example,  if  you  have  8  photos  in  the  gallery  and  set  Columns  to  4,  your 
thumbnail  page  will  have  two  rows  of  four  pictures  each. 


8.   Continue  formatting  or  click  Done  to  close  the  editor. 
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Formatting  the  Photo  Pages 


NetObjects  Fusion  makes  it  easy  for  you  to  give  the  photo  gallery  professional 
polish.  You  can  choose  from  a  variety  of  layouts  for  the  photo  and  its  descriptive 
text  and  select  a  frame  that  complements  your  SiteStyle.  The  format  options  you 
select  apply  to  all  photo  pages. 


Selecting  a  Photo  Page  Layout 


1 .  In  Page  view,  display  the  thumbnail  page  or  a  photo  page  of  the  gallery  you  want 
to  work  with. 

2.  Open  the  Photo  Gallery  Properties  Editor. 

3.  Display  the  Photo  Page  tab. 


Photo  Gallery  Properties  Editor:  Yosemite 


Images        j    Thumbnail  Page        Photo  Page  j 

Layout:  — 


<?  r 

Photo  Frame:  — 


Format  Title...  | 
Format  Caption...  | 
V  Display  title  in  banner 


Template:  |  Bevel 
Preview:  (scaled  to  fit) 


_zJ     Style:)  Crimson 


Bevel  is  a  good  all-purpose  photo  template  that  resembles  a 
beveled  plastic  frame.  It  works  in  many  different  scenarios. 


•  Allows  photos  to  be  resized  to  any  dimension 

•  Works  against  any  background 


4.   In  the  Layout  section  of  the  tab,  select  a  layout. 

In  the  samples,  the  boxes  with  an  X  represent  the  photo,  the  bold  line  is  the  title 
text,  and  the  text  block  is  the  caption. 
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5.  To  replace  the  banner  text  on  each  page  with  the  title  of  the  photo,  select 
Display  title  in  browser. 

If  you  select  this  option,  be  sure  to  select  a  layout  that  does  not  have  a  title. 

6.  Continue  formatting  or  click  Done  to  close  the  editor. 

Selecting  a  Photo  Frame  Template 

1 .  In  Page  view,  display  the  thumbnail  page  or  a  photo  page  of  the  gallery  you  want 
to  work  with. 

2.  Open  the  Photo  Gallery  Properties  Editor. 

3.  Display  the  Photo  Page  tab. 

4.  In  the  Photo  Frame  section  of  the  tab,  select  a  template  from  the  drop-down  list. 

Options  associated  with  the  selected  template  appear.  Information  about  the 
template  and  when  to  use  it  appear  next  to  the  preview  window. 

5.  Set  the  frame  options. 

6.  Continue  formatting  or  click  Done  to  close  the  editor. 

Navigating  Between  Photo  Pages 

1 .   In  Page  view,  display  the  photo  page  of  the  gallery  you  want  to  work  with. 

The  first  photo  in  the  gallery  appears. 

n  I       I  2.   Use  the  Previous  and  Next  buttons  on  the  control  bar  to  move  from  photo  to 

JL  photo. 
Previous  and  Next 
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Setting  Up  Navigation  for  Site  Visitors 

NetObjects  Fusion  automatically  inserts  navigation  buttons  with  smart  links  on  the 
photo  pages.  Site  visitors  can  use  these  buttons  to  go  to  the  next  and  previous  photo 
pages  and  to  return  to  the  thumbnail  page. 


m  m  m 


The  images  used  for  these  buttons — SPNavLeft.gif,  SPNavRight.gif,  and  SPNavUp.gif — 
are  in  the  NetObjects  Fusion  7\NetObjects  System  folder. 

If  you  do  not  want  to  use  these  buttons,  you  can  delete  them  and  set  up  your  own 
smart  links  between  pages.  See  "Adding  Navigation  Buttons  to  Stacked  Pages"  on 
page  406. 

Removing  a  Photo  Gallery 

1.  In  Page  view,  display  the  thumbnail  page  of  the  gallery  you  want  to  remove. 

2.  Select  the  photo  gallery  object  and  delete  it. 

3.  Go  to  Site  view. 

4.  Delete  the  photo  page  associated  with  the  gallery. 

When  you  add  a  new  photo  gallery,  the  name  of  the  gallery  you  just  removed  still 
appears  in  the  Insert  an  existing  Photo  Gallery  list  in  the  Add  Photo  Gallery  dialog. 

To  delete  a  photo  gallery  completely  from  your  site: 

1 .  Go  to  Assets  view. 

2.  Select  the  Data  Objects  tab. 

3.  Select  the  photo  gallery  you  want  to  delete. 

4.  Press  Delete. 

You  can  delete  a  photo  gallery  only  if  you  have  first  removed  it  from  your  site  as 
described  above. 
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Adding  Tables 

Presenting  information  in  tabular  format  is  often  an  effective  way  to  convey 
complex  concepts  and  ideas.  NetObjects  Fusion  makes  it  easy  to  add  tables  to  a  site. 
You  can  select  and  work  with  a  whole  table,  just  a  row,  just  a  column,  a  single  cell, 
or  several  rows,  columns,  or  cells.  Each  of  these  objects  has  its  own  properties 
palette  and  its  own  HTML  button,  so  you  can  apply  HTML  to  the  cell,  row,  column, 
or  table. 

This  chapter  describes: 

♦  Adding  tables 

♦  Setting  table  structure 

♦  Working  with  cells 

♦  Adding  text  and  pictures  to  tables 
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1.   In  Page  view,  choose  the  Table  tool  from  the  Container  flyout  on  the  Standard 
toolbar  and  draw  a  box  where  you  want  to  position  the  table. 

The  Create  Table  dialog  appears. 


Create  Table 

^■11 

Number  of  columns: 

i  zJ 

Number  of  rows: 

[  OK 

Cancel 

2.   Specify  the  number  of  columns  and  rows  in  the  table  and  click  OK. 

The  table  appears  with  the  Table  Properties  palette.  These  properties  apply  to 
the  entire  table;  you  can  also  select  a  row,  column,  or  individual  cell  and  set  its 
properties.  See  "Setting  Row  and  Column  Properties"  on  page  219  and  "Setting 
Cell  Properties"  on  page  220. 


L 

i 

H  IBS  1  A  1 

(?  Fixed  width    C  Relative  width 
Table  border:  |1 

Cell  gadding:       pi  ^ 

_ 

Cellspacing:  [3 

1-  Advanced  

|~  Generate <COL>  lags 

[V  Generate  non-breaking  spaces 

|     Generate  width  on  all  cells 

- 

r  Table  is  a  form  j 

Table  HTML... 

Each  table,  column,  row,  and  cell  is  an  individual  object.  You  can  view  the  object 
hierarchy  by  choosing  Object  Tree  from  the  View  menu.  You  can  also  see  which 
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table  object  is  selected  by  referring  to  the  Object  Tree  palette.  You  can  rename  tables 
and  cells  in  the  Object  Tree  palette,  but  you  cannot  rename  rows  or  columns. 


Object  Tree  HHB| 


I  -  O  Home 

DefaultMasterB  order 
-  0  HomeLayout 

HPf  Columnl 
;  HPf  Column2 
B"H  Rowl 
I  B-H  CelH 
|  B-H  Cell2 
3--ffit  Flow2 
B-H  Cell3 
B-rS  Cell4 

I 


You  can  add  an  action  to  a  table  or  cell  using  the  Actions  tab  on  the  Properties 
palette. 


Setting  Table  Properties 

1.  In  Page  view,  select  the  table  and  make  sure  the  General  tab  of  the  Table 
Properties  palette  is  displayed. 

2.  If  the  table  is  embedded  in  a  text  box,  you  can  choose  Fixed  width  or  Relative 
width.  If  the  table  is  not  in  a  text  box,  these  options  are  not  available. 

♦  If  the  text  box  containing  the  table  is  sized  to  the  Layout,  set  to  wrap  to  the 
browser  width,  and  the  MasterBorder  margins  are  set  to  zero,  you  can  use 
Relative  width  to  size  the  table  as  a  percentage  of  the  text  box.  If  a  site  visitor 
resizes  the  browser  window,  the  table  will  resize  accordingly. 

♦  Use  Fixed  width  to  ensure  that  NetObjects  Fusion  creates  a  table  that  does 
not  resize  if  the  site  visitor  resizes  the  browser  window. 

3.  Enter  a  thickness  for  the  table  border.  Thickness  is  measured  in  pixels. 

4.  Set  the  Cell  padding,  which  is  the  amount  of  space  between  the  contents  of  a 
table  cell  and  the  cell  boundaries.  Cell  padding  is  measured  in  pixels. 
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5.   Set  the  Cell  spacing,  which  is  the  distance  between  cells. 

Table  border 
Cell  padding 

Cellspacing 


Sales 

Q1 

Q2 

Q3 

Q4 

North 

345 

564 

380 

475 

South 

445 

490 

475 

510 

6.  In  the  Advanced  section  of  the  General  tab,  select: 

♦  Generate  <COL>  tags  to  render  the  table  quickly  in  Microsoft  Internet 
Explorer  4.0  browsers.  This  option  must  be  selected  if  you  want  to  add 
HTML  to  a  table  column. 

♦  Generate  non-breaking  spaces  to  prevent  empty  cells  from  collapsing  in 
Netscape  Navigator  and  Microsoft  Internet  Explorer. 

When  this  option  is  selected,  NetObjects  Fusion  inserts  a  space  character  in 
every  table  cell.  If  you  embed  an  image  in  a  table  cell,  the  extra  space  causes  a 
gap  between  the  image  and  the  cell  border.  To  remove  the  gap,  clear  this 
option. 

♦  Generate  width  on  all  cells  to  improve  rendering  speed  and  WYSIWYG  in  both 
Netscape  Navigator  and  Microsoft  Internet  Explorer  browsers. 

7.  To  make  the  table  a  form,  select  Table  is  a  form.  See  Chapter  24,  "Designing  and 
Implementing  Forms." 

You  can  add  HTML  code  to  a  table.  See  Chapter  27,  "Working  with  HTML 
Directly."  You  can  also  convert  a  table  into  a  Layout  Region  by  right-clicking  the 
table  and  selecting  Convert  Table  to  Layout  Region  from  the  shortcut  menu.  See 
"Working  with  Layout  Regions"  on  page  106. 


Setting  the  Table  Background 

You  can  have  both  a  color  and  a  picture  in  the  table  background.  If  the  picture  has  a 
transparent  area,  the  background  color  shows  through. 

1.  In  Page  view,  select  the  table. 

2.  Click  the  Background  tab  on  the  Table  Properties  palette  and  in  the  Color  field, 
select: 

♦  Automatic  to  set  the  table  background  to  the  color  specified  by  its  parent 
object. 


216 


Chapter  1 5    Adding  Tables 


♦  Color  to  select  a  background  color  from  the  Color  Picker.  The  selected  color 
appears  in  the  box  to  the  right  of  the  Color  field.  To  change  the  color,  click 
the  box  and  select  a  new  color  from  the  Color  Picker. 

3.   In  the  Image  field,  select: 

♦  Automatic  to  set  the  background  to  the  image  specified  by  the  table's  parent 
object. 

♦  Browse  to  select  an  image  from  the  Picture  File  Open  dialog.  See  "Choosing 
an  Image  Format"  on  page  178.  If  the  picture  is  smaller  than  the  table,  the 
browser  tiles  the  image.  If  you  select  a  picture  with  a  transparent  color,  the 
background  color  shows  through.  To  change  the  image,  click  the  Browse 
button  to  the  right  of  the  field. 

Adjusting  the  Table  Structure 

You  can  resize,  add,  or  delete  rows  and  columns,  and  merge  or  split  cells  to  design 
the  table  structure. 


Resizing  Table  Rows  and  Columns 

Z)  In  Page  view,  select  the  table,  and: 

♦  Drag  the  cell  guides  on  the  vertical  or  horizontal  ruler  to  resize  a  row  or 
column.  This  changes  the  overall  table  height  or  width. 

Use  these  handles  to  change 
the  column  width 


Use  these  handles  to  move 
the  table 


Use  these  handles  to  change-\  g 
the  row  height 


l19 


I2?0, 


♦  Point  to  the  border  of  the  row  or  column  you  want  to  resize  and  drag  the  cell 
boundary  to  the  new  size.  If  you  resize  a  row,  it  changes  row  height  and  the 
overall  table  height. 
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♦  For  precise  sizing  of  rows  and  columns,  or  to  make  all  rows  or  all  columns 
the  same  size,  see  "Setting  Row  and  Column  Properties"  on  page  219. 

Inserting  a  Row  or  Column 

1.  In  Page  view,  select  the  table. 

2.  Select  a  row  or  column  by  moving  the  mouse  pointer  over  the  table  border  and 
clicking  when  you  see  the  single-headed  arrow. 

3.  Right-click  to  display  the  shortcut  menu. 

♦  To  insert  a  row  at  the  bottom  of  the  table,  or  a  column  at  the  right  side  of  the 
table,  select  Append  Row  or  Append  Column. 

♦  To  insert  a  row  above  the  selected  row,  or  a  column  to  the  left  of  the  selected 
Column,  select  Insert  Row  or  Insert  Column. 

Removing  a  Row  or  Column 

1.  In  Page  view,  select  the  table. 

2.  Select  the  row  or  column  you  want  to  delete  by  moving  the  mouse  pointer  over 
the  table  border  and  clicking  when  you  see  the  single-headed  arrow. 

3.  Right-click  and  select  Delete  Row  or  Delete  Column  from  the  shortcut  menu. 

Merging  and  Splitting  Table  Cells 

1.  In  Page  view,  select  the  cells  in  the  table  that  you  want  to  merge  or  split.  See 
"Selecting  Table  Cells"  on  page  220. 

2.  Right-click  to  display  the  shortcut  menu. 

♦  To  divide  the  cell,  select  Split  Cells  and  enter  the  number  of  rows  and/or 
columns  you  want  to  split  the  cell  into  in  the  Split  Cells  dialog.  The 
maximum  is  10  x  20. 

♦  To  merge  cells,  select  Merge  Cells.  All  borders  between  the  selected  cells 
disappear. 
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Setting  Row  and  Column  Properties 

When  you  select  a  table  row  or  column,  a  Row  or  Column  tab  is  added  to  the  Cell 
Properties  palette. 

1.  In  Page  view,  select  the  table. 

2.  Select  a  row  or  column  by  moving  the  mouse  pointer  over  the  table  border  and 
clicking  when  you  see  the  single-headed  arrow.  Drag  to  select  multiple  rows  or 
columns. 

The  Cell  Properties  palette  appears  with  the  Row  or  Column  tab  added. 


Row  properties  Column  properties 


3.  Set  the  Vertical  and  Horizontal  Alignment  to  position  objects  within  cells. 

4.  Set  Row  height  or  Column  width. 

♦  Display  the  Row  tab  of  the  Cell  Properties  palette.  To  make  all  selected  rows 
the  same  height,  make  sure  the  Specified  option  for  each  row  is  selected  and 
then  set  the  row  height.  You  can  use  this  option  to  set  the  height  for  any 
individual  row.  If  Specified  is  cleared,  rows  maintain  their  individual 
heights. 

♦  Display  the  Column  tab  of  the  Cell  Properties  palette.  To  make  selected 
columns  the  same  width,  enter  a  number  in  the  Column  width  field,  and 
press  Enter.  To  size  each  selected  column  to  its  contents,  click  Fit  to 
Contents. 

5.  To  make  the  row  a  form,  select  Row  is  a  form.  See  Chapter  24,  "Designing  and 
Implementing  Forms."  Due  to  limitations  of  HTML,  you  cannot  make  a 
column  a  form. 


219 


Working  with  Table  Cells 


You  can  add  HTML  code  to  a  row  or  column.  See  Chapter  27,  "Working  with 
HTML  Directly." 


Working  with  Table  Cells 


Each  table  cell  is  an  individual  object.  You  can  set  alignment  of  its  content,  choose  a 
background  color  and  picture,  format  text,  make  the  cell  a  form,  or  add  HTML. 

Selecting  Table  Cells 

1 .  Click  a  cell. 

2.  Move  the  pointer  over  the  cell  and  hold  down  the  left  mouse  button. 

3.  When  you  see  the  cross-shaped  pointer,  drag  it  over  the  cells  you  want  to  select. 
Selected  cells  are  highlighted  with  a  border. 

Setting  Cell  Properties 

1.  In  Page  view,  click  a  cell  in  a  table  to  select  it. 
The  Cell  Properties  palette  appears. 

2.  If  necessary,  click  the  Cell  tab. 

a  a  |n| 


Alignment  — _  

Vertical:     |Auto        ^  |  (Auto) 


Horizontal:  |  Auto         T  |   |  (Auto) 
Inset  Jo" 
Background  - 

r 


Color:  Automatic: 


Image:  p 


|  Automatic 
Custom  style: 


fy  Cell  is  a  header 


3.   Set  the  Vertical  and  Horizontal  Alignment  for  the  cell.  If  the  cell  alignment  is  set 
to  Automatic  the  alignment  of  the  row  or  column  containing  the  cell  is  shown 
in  parentheses.  If  you  select  a  different  setting  for  the  individual  cell,  it  overrides 
the  row  or  column  setting  and  is  shown  in  parentheses. 
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♦  Vertical  determines  alignment  to  the  top,  middle,  or  bottom  of  the  cell. 

♦  Horizontal  determines  alignment  to  the  left,  center,  or  right  of  the  cell.  If  the 
cell  contains  text,  you  can  justify  it  within  the  cell. 

4.  Set  the  cell  background.  You  can  use  both  a  color  and  a  picture. 

♦  To  change  the  background  color,  in  the  Color  field  select: 

-❖•  Automatic  to  set  the  cell  background  to  the  color  specified  for  the  table. 

■❖•  Color  to  select  a  background  color  for  the  cell  from  the  Color  Picker.  The 
selected  color  appears  in  the  box  to  the  right  of  the  Color  field.  To 
change  the  color,  click  the  box  and  select  a  new  color  from  the  Color 
Picker. 

♦  To  change  the  background  image,  in  the  Image  field,  select: 

■❖•  Automatic  to  set  the  background  to  the  image  used  by  the  table. 

-v-  Browse  to  select  an  image  for  the  cell  background  from  the  Picture  File 
Open  dialog.  See  "Choosing  an  Image  Format"  on  page  178.  If  the 
picture  is  smaller  than  the  cell,  the  browser  tiles  the  image.  If  you  select  a 
picture  with  a  transparent  color,  the  background  color  shows  through. 
To  change  the  image,  click  the  Browse  button  to  the  right  of  the  field. 

5.  To  apply  text  styles  and  formatting  to  cells,  click  the  Format  tab.  See  Chapter  12, 
"Designing  with  Text." 

6.  To  make  the  cell  a  form,  select  Cell  is  a  form.  See  Chapter  24,  "Designing  and 
Implementing  Forms." 

7.  Select  Cell  is  a  header  to  format  the  cell  as  a  column  or  row  heading.  This  makes 
it  easier  for  people  with  disabilities  to  read  the  table. 

You  can  also  add  HTML  code  to  a  cell.  See  Chapter  27,  "Working  with  HTML 
Directly." 

Sizing  Cells 

To  make  a  table  cell  shrink  to  fit  the  content  in  the  cell: 

1 .  Right-click  in  the  cell  you  want  to  size. 

2.  Select  Fit  Cell  from  the  shortcut  menu. 
The  cell  shrinks  to  fit  the  content. 
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Adding  Text  and  Pictures  to  Cells 

Working  in  a  table  cell  is  the  same  as  working  in  a  text  box.  You  can: 

♦  Add  and  format  text.  You  can  apply  formats  to  all  selected  cells  at  one  time.  See 
Chapter  12,  "Designing  with  Text." 

♦  Embed  objects.  See  "Embedding  Objects  in  a  Text  Box"  on  page  115. 

♦  Wrap  text  around  objects.  See  "Wrapping  Text  around  Objects"  on  page  117. 

♦  Modify  text  box  properties.  See  Chapter  9,  "Working  with  Text  Boxes." 

To  select  the  contents  of  a  cell: 

D  Double-click  the  cell. 

Cross-hatching  appears  around  the  selected  cell.  You  can  edit  the  text  in  the  cell 
or  change  cell  properties. 
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CHAPTER  16 


Drawing  Shapes  and  Lines 

Shapes  and  lines  are  essential  building  blocks  for  your  page  designs.  You  can  draw 
rectangles,  rounded  rectangles,  ellipses,  and  polygons,  as  well  as  HTML  horizontal 
rules,  lines,  or  SiteStyle  lines,  and  set  shape  and  line  properties. 

This  chapter  describes: 

♦  Drawing  shapes  and  setting  properties 

♦  Drawing  horizontal  rules 

♦  Adding  SiteStyle  lines 

♦  Drawing  and  editing  lines  and  arrows 
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Drawing  Shapes 


n 


Draw  Rectangle  tool 


Drawing  Shapes 


To  draw  an  ellipse,  rectangle,  rounded  rectangle,  or  polygon: 

1.  In  Page  view,  select  the  Draw  tool  on  the  Standard  toolbar  and  choose  the  shape 
you  want  to  add  from  the  fiyout. 

2.  Draw  the  shape  on  the  page. 

♦  To  draw  a  rectangle,  ellipse,  or  rounded  rectangle,  click  and  draw  the  shape. 

♦  To  draw  a  polygon,  click  to  set  the  start  point,  click  to  set  all-but-the-last 
points,  and  double-click  the  last  point. 

The  Properties  palette  for  the  shape  you  created  appears. 
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Rectangle  Properties 


□  o 


When  you  draw  a 
shape,  the  appropriate 
properties  palette 
appears 


TeKt  in  element  

I-  Enable         Settings...  | 


Type  an  alt  tag  in  the  AltTag  field. 

See  "Adding  and  Modifying  Alt  Tags"  on  page  80. 

In  the  Line  width  box,  set  the  shape  outline  thickness. 

To  make  the  border  invisible,  set  it  to  zero. 

In  the  Color  section  of  the  Properties  palette,  click  the  Fill  Color  button.  In  the 
Color  Picker,  select  the  color  you  want  to  assign  to  the  shape  fill  and  click  OK. 

Click  the  Line  Color  button.  In  the  Color  Picker,  select  the  color  you  want  to 
assign  to  the  shape  border  and  click  OK. 


7.   To  adjust  the  shape,  drag  its  handles. 
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♦  To  change  the  shape  proportionally,  drag  a  corner  handle  while  holding 
down  Ctrl. 

♦  To  vary  the  curve  of  a  rounded  rectangle,  select  it,  place  the  pointer  over  the 
inside  corner  handle  until  it  changes  to  a  four-headed  arrow,  then  drag 
toward  the  inside  or  outside  of  the  shape. 


Use  this  handle  to  modify  the  curve 


♦  To  edit  the  lines  of  a  polygon,  select  it,  place  the  pointer  over  any  handle 
until  you  see  the  four-headed  arrow,  then  drag  the  handle  to  adjust  the 
shape. 

8.   To  add  text  to  a  shape,  see  "Adding  Text  to  a  Shape  or  Picture"  on  page  168. 

When  you  publish  a  page  with  shapes,  NetObjects  Fusion  generates  each  shape  as  a 
.gif  file.  If  the  page  contains  more  than  one  shape  of  the  same  type,  NetObjects 
Fusion  adds  a  number  to  the  shape's  file  name.  For  example,  the  first  rounded 
rectangle  you  draw  is  named  a_Rounded_Rectangle.gif,  the  second  one  is  named 
a_Rounded_Rectangle1  .gif,  the  third  a_Rounded_Rectangle2.gif,  and  so  on. 


□ 


HR  Rule  tool 


Adding  HTML  Horizontal  Rules 


HTML  rules  are  always  horizontal.  They  can  display  with  or  without  beveled  edges 
in  a  browser.  When  you  embed  an  HTML  rule  in  a  text  box,  you  can  set  its  length  as 
a  percentage  of  the  text  box  width. 

To  draw  an  HTML  horizontal  rule: 

1.  In  Page  view,  select  the  Line  tool  on  the  Standard  toolbar  and  choose  the  HR 
Rule  tool  from  the  flyout. 

2.  Draw  the  horizontal  rule  on  the  page. 
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Adding  a  SiteStyle  Line 


The  HR  Rule  Properties  palette  appears. 


This  option  appears  only  when  the 
rule  is  embedded  in  a  text  box 


3.  In  the  Thickness  box,  set  the  thickness  of  the  rule. 
The  standard  width  is  2  pixels. 

4.  Select  Shaded  to  create  a  bevel  effect. 
The  standard  HR  rule  is  shaded. 

5.  If  the  HR  rule  is  embedded  in  a  text  box,  you  can  specify  its  length  as  a 
percentage  of  the  text  box. 


You  can  use  SiteStyle  lines  to  divide  a  page  into  sections.  A  SiteStyle  line  is  part  of 
the  current  SiteStyle.  See  Chapter  17,  "Using  SiteStyles." 

1.   In  Page  view,  select  the  Line  tool  on  the  Standard  toolbar  and  choose  the 


Adding  a  SiteStyle  Line 


SiteStyle  Line  tool 


2. 


SiteStyle  Line  tool  from  the  flyout. 

Click  where  you  want  to  position  the  left  end  of  the  line. 
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The  SiteStyle  Line  Properties  palette  appears. 


SiteStyle  Line  Properties 


ZEE 


Line  Draw  tool 


L 


:  |  tyles\MountainUmages\Line.gif 
|  Custom  lmage.!~| 

f*  SiteStyle 

C  other:  |  Abington  ^] 


3.  To  select  a  different  image  for  the  line,  click  Custom  Image  and  choose  an  image 
in  the  Picture  File  Open  dialog. 

4.  To  use  a  line  from  a  different  SiteStyle,  click  Other  and  select  a  SiteStyle  from 
the  drop-down  list. 

If  you  change  SiteStyles,  NetObjects  Fusion  updates  the  line.  A  SiteStyle  line  is  a  .gif 
file. 

You  can  change  the  size  of  the  SiteStyle  line  by  dragging  a  handle.  However,  if  you 
assign  a  new  SiteStyle,  the  line  returns  to  its  default  size. 


Drawing  Lines  and  Arrows 


1.  In  Page  view,  select  the  Line  tool  from  the  Draw  tool  flyout  on  the  Standard 
toolbar. 

2.  Drag  from  one  point  to  another  to  set  the  position,  length,  and  orientation  of 
the  line. 

The  point  where  you  start  dragging  is  the  head  of  the  line.  The  point  where  you 
finish  is  the  tail  of  the  line,  regardless  of  the  direction  you  drag.  To  constrain  the 
line  to  vertical  or  horizontal,  hold  down  the  Shift  key  while  dragging. 
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Drawing  Lines  and  Arrows 


3.  Type  an  alt  tag  in  the  AltTag  field. 

See  "Adding  and  Modifying  Alt  Tags"  on  page  80. 

4.  In  the  Line  width  box,  set  the  width  of  the  line  in  pixels. 

5.  In  the  Color  section,  click  the  Color  button  for  the  line,  head,  and  tail,  choose  a 
color  in  the  Color  Picker,  and  click  OK.  To  set  all  three  items  to  the  line  color, 
select  All  parts  use  one  color. 

6.  In  the  Style  section,  select  styles  for  the  head  and  tail  from  the  drop-down  lists. 

If  you  want  the  head  and  tail  to  share  the  same  style,  select  the  style  for  the  head, 
then  select  Head/Tail  same  style. 

Select  Outline  to  assign  the  line  color  to  the  head  and  tail  outlines,  regardless  of 
their  fill  colors. 

When  you  publish  a  page  with  drawn  lines,  NetObjects  Fusion  generates  each  one 
as  a  .gif  file.  On  your  page,  each  line  occupies  the  rectangular  area  defined  by  the 
beginning  and  ending  points  of  the  line. 

If  the  page  contains  more  than  one  shape  of  the  same  type,  NetObjects  Fusion  adds 
a  number  to  the  shape's  file  name.  For  example,  the  first  line  you  draw  is  named 
a_ArrowLine.gif,  the  second  one  is  named  a_ArrowLine1.gif,  the  thirda_ArrowLine2.gif, 
and  so  on. 
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Editing  Lines  and  Arrows 

To  change  the  length  and  width  of  a  line,  or  to  change  the  shape  and  size  of  the 
line's  head  and  tail: 

1.   In  Page  view,  select  the  line. 

Selection  handles  appear. 


Place  the  pointer  over  a  selection  handle.  The  pointer  changes  to  a  crosshair. 

♦  To  make  the  line  longer  or  shorter,  or  to  change  its  direction,  drag  an  end 
handle. 

♦  To  make  the  line  thicker  or  thinner,  drag  a  side  handle. 

♦  To  change  the  shape  of  the  head  or  tail,  drag  one  of  its  handles. 

2.   In  the  Style  section  of  the  Line  Properties  palette,  select  a  style  from  the  Head  or 
Tail  drop-down  lists  to  change  the  head  or  tail  style. 
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Drawing  Lines  and  Arrows 
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CHAPTER  17 


Using  SiteStyles 

SiteStyles  are  sets  of  thematic  elements  you  can  apply  to  your  site.  Some  style 
elements  are  graphic  and  others  affect  the  appearance  of  text  on  your  pages.  In  Style 
view,  you  use  SiteStyles  to  create  the  look  and  feel  of  your  entire  site.  NetObjects 
Fusion  comes  with  a  number  of  professionally  designed  SiteStyles  that  you  can  use 
to  design  your  site. 

You  can  use  SiteStyles  as  they  are  or  edit  them.  You  can  also  create  SiteStyles  using 
your  own  artwork. 

This  chapter  describes  SiteStyles  and  how  to  use  them,  including: 

♦  Applying  SiteStyles 

♦  Editing  the  graphic  and  text  elements  of  a  site 

♦  Creating  SiteStyles 

♦  Creating  text  styles 

♦  Adding  and  removing  SiteStyles 

♦  Styles  folder  structure 
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What  Is  a  SiteStyle? 

A  SiteStyle  is  a  collection  of  graphic  and  typographical  elements  you  can  apply  to 
every  page  in  your  site  to  create  its  look  and  feel.  Your  site's  SiteStyle  gives  it  a 
consistent  look  that  survives  variations  introduced  by  your  site  visitor's  browser. 
When  you  change  the  SiteStyle,  NetObjects  Fusion  automatically  updates  every 
page  in  your  site  with  the  new  look. 

If  you  do  not  find  a  pre-built  style  that  is  appropriate  for  your  site,  you  can  create 
your  own  custom  SiteStyle.  Or,  if  a  SiteStyle  works  for  most,  but  not  all,  pages  in 
your  site,  you  can  customize  it  for  just  a  few  pages.  For  even  more  flexibility — for 
example,  to  use  more  than  one  banner  image  in  your  site  or  to  use  a  different  image 
for  each  button  in  a  navigation  bar — you  can  use  the  Navigation  Bar  and  Banner 
Properties  palettes  in  Page  view.  See  Chapter  18,  "Creating  Navigation  Bars  and 
Banners." 

Exploring  Style  View 

When  you  click  the  Style  button  on  the  control  bar,  NetObjects  Fusion  displays 
Style  view. 


Note:  If  you  see  the  View  tips,  open  a  site  to  see  the  list  of  SiteStyles. 

Style  view  shows  a  list  of  SiteStyles  available  for  the  current  site  and  the  graphic  and 
text  elements  of  the  selected  SiteStyle.  Click  the  Graphic  tab  to  see  the  graphic 
elements  of  the  currently  selected  SiteStyle.  Click  the  Text  tab  to  see  the  text 
elements,  which  show  how  the  site's  text  appears  on  the  page. 


Chapter  1 7    Using  SiteStyles 


Text  tab 


Business  -  Green 
;ape  -  Gold 


Garden 


a  S  Oiq, 


low  -  Gieen  t  Yellow 
low  -  Red  ft  Blue 

-  Gold 
Ikast  -  Gieen 

-  Purple 

on    Blue  t  Gold 
on  -  Gieen  ft  Puiple 
London  -  Maroon  4  Cocoa 


Phoe 


-  Purple  ft  Slate 


irbrushed  -  Gold 
■a  -  Gold  S  Turquoise 
Vienna  -  La  vendor  ft  Canary 
■a  -  Red  ft  Dark  Giay 


Body  text  style  sample.  Lorem  jp  sum,  Dolor  sit 
amet,  consectetueradipiscing  elit,  seel  diam  nonurn. 


Paragraph  text  style  sample.  Lorem  Ip  sum.  Dolor  sit 
amet,  consectetuer  adipisci.ng  elit,  seel  diam  nonurn. 


Text  Object  style  Sample.  Lorem  ip  sum,  Dolor  sit 
amet,  consectetuer  adipiscing  elit,  seel  diam  nonum. 


Linked 
Visited  Link 
Active  Link 
Hover  Link 


Bulleted  item  1 
Bulleted  item  2 


1 .  Numbered  item  1 

2.  Numbered  item  2 


Text 

elements 
of  the 
selected 
SiteStyle 


Heading  1 

Heading  2 

Heading  3 
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Exploring  Style  View 


Each  NetObjects  Fusion  SiteStyle  is  composed  of  graphic  and  text  style  elements. 
On  the  Graphic  tab  you  see  samples  of  the: 

♦  Banner.  Image  containing  the  banner  text  and  color. 

♦  Primary  navigation  bar.  Images  of  navigation  buttons  as  they  appear  and  behave 
on  the  primary  navigation  bar. 

♦  Secondary  navigation  bar.  Images  of  navigation  buttons  as  they  appear  and 
behave  on  the  secondary  navigation  bar. 

♦  Primary  buttons.  Design  of  the  primary  buttons  in  regular,  highlighted,  regular 
rollover,  and  highlighted  rollover  states. 

♦  Secondary  buttons.  Design  of  the  secondary  buttons  in  regular,  highlighted, 
regular  rollover,  and  highlighted  rollover  states. 

♦  Data  list  icons.  Bullet  graphic  displayed  when  you  use  a  data  object  to  create  a 
data  list. 

♦  Background.  Color  or  image  used  as  a  background  of  the  page. 

♦  SiteStyle  line.  Image  for  lines  placed  with  SiteStyle  Line  tool. 

The  name  of  the  SiteStyle  designer  is  listed  above  the  graphic  elements  at  the  top  of 
the  view. 

On  the  Text  tab  you  see  samples  of: 

♦  Body.  Body  text  style  that  sets  the  overall  text  style  for  the  entire  site.  The 
background  of  the  Body  is  the  same  as  the  background  shown  on  the  Graphic 
tab. 

♦  Normal(P).  Style  for  text  that  you  type  in  normal  paragraphs. 

♦  Text  Object.  Style  for  text  that  you  type  in  text  objects. 

♦  Text  Navbar.  Style  used  for  text  navigation  bars. 

♦  Link.  Text  style  and  colors  for  text  used  for  links.  Changes  made  to  the  link  style 
affect  the  Text  Navbar  style. 

♦  Unordered  List.  Image  and  text  style  for  bullet  lists. 

♦  Ordered  List.  Numbering  and  text  style  for  numbered  lists. 

♦  Headings.  Text  styles  for  HI  through  H6  heads. 
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Applying  SiteStyles 

By  default,  navigation  banners,  buttons,  text,  lists,  and  other  site  design  elements 
obtain  their  images  and  text  attributes  from  the  SiteStyle  assigned  to  the  site.  When 
you  apply  a  SiteStyle,  NetObjects  Fusion  automatically  applies  style  elements 
throughout  your  site.  For  example,  it  replaces  all  the  buttons  in  your  navigation 
bars  with  images  from  the  style  you  specify,  while  maintaining  the  relevant  links. 

To  apply  a  SiteStyle: 

1.   In  Style  view,  select  a  SiteStyle  from  the  list  of  SiteStyles. 
The  elements  of  the  selected  style  appear, 
il  2.   Click  the  Set  Style  button  on  the  control  bar. 

Cz)\ 

 "  NetObjects  Fusion  applies  the  style  to  your  site. 

Set  Style 

When  you  go  to  Page  view,  you  see  the  new  style  elements  and  text  attributes  on 
each  page. 

Editing  the  Graphic  Elements  of  SiteStyles 

You  can  edit  any  graphic  element  of  an  existing  style  to  customize  it.  For  instance,  if 
you  like  every  element  of  a  style  except  the  banner,  you  can  change  just  the  banner 
image.  The  image  for  every  banner  in  your  site  changes  to  the  new  image. 

You  can  also  customize  SiteStyle  elements  for  some,  but  not  all  pages.  See 
Chapter  18,  "Creating  Navigation  Bars  and  Banners." 


Note:  When  you  edit  a  SiteStyle,  every  site  that  uses  the  SiteStyle  is  affected.  Your  \Styles 
folder  stores  only  one  copy  of  a  SiteStyle.  When  you  change  it,  the  change  appears  in 
all  sites  that  use  that  SiteStyle.  If  the  style  you  want  to  change  is  used  in  other  sites  and 
you  don't  want  them  to  be  affected,  create  a  new  style  from  the  original  style.  See 
"Creating  a  SiteStyle"  on  page  245. 
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Editing  the  Graphic  Elements  of  SiteStyles 


Removing  the  Read  Only  Setting 

All  SiteStyles  delivered  with  NetObjects  Fusion  are  set  to  Read  only.  Before  you  can 
edit  a  SiteStyle,  you  must  remove  the  Read  only  setting. 

1.  In  Style  view,  select  the  SiteStyle  you  want  to  edit  from  the  list  of  SiteStyles. 

2.  Click  in  the  view  so  the  Style  Properties  palette  appears. 


Stjle  nsme:  |PhoeniK  ■  Teal  EiGrag 
Designed  by:  |  " 

[7  Read  only 


3.   Clear  the  Read  only  option  on  the  Style  Properties  palette.  If  you  don't  remove 
the  check  mark,  you  cannot  edit  the  selected  SiteStyle. 

Editing  Banners  and  Buttons 

With  SiteStyles,  you  can  choose  any  font  on  your  system  for  banner  and  button  text 
and  any  image  for  the  banner  or  button  background.  NetObjects  Fusion 
dynamically  generates  image  files  for  these  banners  and  buttons  using  the  font  and 
images  you  specify  for  each  element.  This  means  that  on  buttons  and  banners,  your 
site  visitors  see  the  fonts  you  select  regardless  of  their  browser  or  the  fonts  installed 
on  their  systems. 

1.  In  Style  view,  select  the  style  you  want  to  change  from  the  list  of  SiteStyles  and 
clear  the  Read  only  option. 

2.  On  the  Graphic  tab,  click  the  banner  or  button  state  you  want  to  edit. 
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The  Properties  palette  appears  for  the  banner  or  selected  button  state. 
El 


Horizontal:  Usi-iter 


|  Middle  ^ 

[o  \?  Right  angle; 


Alignment:  |  Center 


Primary  Button  Properties 


M 


r-  Position  

Horizontal:  |  Left  ^]  1 
Vertical:    |  Middle  TJ 


Rotation:  [o  Right  angle; 


Alignment:  |  Center 


3.  Select  the  font  face,  size,  and  style  for  the  text. 

4.  Click  Color  and  select  a  color  from  the  Color  Picker. 

5.  To  position  the  text  on  the  banner  or  button,  set  the  Horizontal  and  Vertical 
positions. 

If  horizontal  button  position  is  set  to  Left  or  Right,  or  vertical  position  is  set  to 
Top  or  Bottom,  you  can  use  the  Offset  option  to  move  the  text  label  on  the 
button  in  small  increments.  As  you  change  the  offset,  you  can  see  the  text  move 
on  the  button  in  Style  view. 

6.  To  rotate  the  text,  click  the  up  or  down  rotation  buttons.  Click  Right  angles  to 
limit  the  rotation  to  90-degree  increments.  If  you  clear  the  Right  angles  box, 
clicking  the  rotation  buttons  increments  the  rotation  angle  and  rotates  the  text. 
You  can  also  type  a  number  in  the  box. 

7.  Select  an  option  for  multi-line  alignment  if  the  banner  or  button  text  is  more 
than  one  line. 

8.  To  edit  the  banner  or  button  image,  click  the  Image  tab. 

Each  button  state  has  its  own  Properties  palette,  so  you  can  vary  the  images  used 
on  a  navigation  bar.  For  example,  you  can  choose  a  happy  face  for  the  primary 
highlighted  button  and  a  neutral  face  for  the  primary  regular  button. 
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Editing  the  Graphic  Elements  of  SiteStyles 


The  Properties  palette  shows  the  current  image. 


9.   To  select  a  new  image,  click  Browse,  and  select  a  file  in  the  Picture  File  Open 
dialog. 

You  can  select  images  from  your  site  assets  or  from  any  folder  on  your  hard 
disk.  For  best  results,  use  an  image  that  is  the  same  size  as  the  button  or  banner. 

The  images  on  the  Style  view  Graphic  tab  reflect  changes  you  make  on  the  palettes. 
When  you  finish  editing  the  buttons,  check  the  rollover  behavior  using  the 
navigation  bar  samples. 
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Editing  a  Navigation  Bar 

In  addition  to  editing  button  text  and  images,  you  can  change  the  navigation  bar 
borders  and  spacing  between  buttons. 

To  edit  the  borders  and  spacing  of  a  navigation  bar: 

1 .   In  Style  view,  with  the  Graphic  tab  selected,  select  the  style  you  want  to  change 
and  click  the  Primary  or  Secondary  Navigation  Bar  Sample. 

The  Primary  or  Secondary  NavBar  Sample  Properties  palette  appears, 
depending  on  which  navigation  bar  you  select. 


2.  Click  the  Border  up  and  down  buttons  or  enter  the  value  directly  to  change  the 
thickness  of  the  border  around  the  navigation  bar. 

3.  Click  the  Spacing  up  and  down  buttons  to  change  the  amount  of  space  between 
the  buttons. 
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Editing  a  Data  List  Icon 

Data  list  icons  appear  when  you  use  the  Data  List  tool  to  create  a  data  list  in 
Page  view.  See  Chapter  26,  "Data  Publishing." 

1.   In  Style  view,  with  the  Graphic  tab  selected,  select  the  style  you  want  to  change 
and  click  a  Data  List  icon. 

The  Bullet  Properties  palette  appears  showing  the  name  of  the  current  data  list 
icon  image. 


2.   Click  Browse,  select  a  new  image  in  the  Picture  File  Open  dialog,  and  click 
Open. 
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Editing  a  Style  Background 


1 .   In  Style  view,  with  the  Graphic  tab  selected,  select  the  style  you  want  to  change 
and  click  the  Edit  Style  background  box. 

The  Page  Background  Properties  palette  appears. 


2.  In  the  color  field,  select: 

♦  Automatic  to  use  the  default  background  color  set  in  the  browser. 

♦  Transparent  to  let  the  image  or  color  of  a  style  underneath  the  background 
show  through.  For  example,  if  the  site's  paragraph  text  has  a  background 
color,  setting  the  page  background  color  to  transparent  lets  the  paragraph 
background  color  show  through. 

♦  Color  to  use  a  solid  color  background.  To  choose  a  different  color,  click  the 
Color  button  and  select  from  the  Color  Picker. 

3.  In  the  Image  field,  select: 

♦  Automatic  to  use  the  default  image  set  in  the  browser. 

♦  None  to  use  a  background  with  no  image. 

♦  Background.gif  to  use  the  SiteStyle  background. 

♦  Browse  to  select  another  image  for  the  background. 


Image:  |  background. gif 
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Editing  the  SiteStyle  Line 

You  can  use  a  variety  of  horizontal  page-wide  images  to  separate  pages  into 
sections.  You  insert  these  lines  in  Page  view  using  the  SiteStyle  Line  tool,  as 
described  in  "Adding  a  SiteStyle  Line"  on  page  226. 

1.  In  Style  view,  with  the  Graphic  tab  selected,  select  the  style  you  want  to  change 
and  click  the  SiteStyle  Line. 

The  Line  Properties  palette  appears. 

2.  Click  Browse,  select  a  new  image  in  the  Picture  File  Open  dialog,  and  click 
Open. 

Editing  the  Text  Elements  of  SiteStyles 

You  can  edit  any  text  element  of  an  existing  SiteStyle  to  customize  it.  For  instance,  if 
you  change  the  Heading  3  text  style,  the  changes  appear  throughout  your  site 
wherever  that  text  style  is  applied. 

To  customize  style  elements  for  some,  but  not  all  pages,  you  do  not  edit  the 
SiteStyle,  you  edit  the  text  in  Page  view.  See  Chapter  12,  "Designing  with  Text." 

When  you  edit  a  SiteStyles  text  elements,  every  site  that  uses  the  SiteStyle  is 
affected.  If  the  changes  apply  to  text  elements  set  to  Automatic,  the  changes  flow 
through  to  the  other  sites. 


Note:  To  edit  the  text  elements  of  a  SiteStyle,  you  must  first  remove  its  Read  only  setting.  See 
"Removing  the  Read  Only  Setting"  on  page  236. 

1.  In  Style  view,  select  a  SiteStyle  from  the  list  of  styles. 

2.  Click  the  Text  tab. 

The  text  elements  appear. 
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3.   Click  a  text  element  to  select  it. 

File    Edit    View    Go    Style    Tools  Help 


b    [&    «    a   I    %      m  a> 


■     a„pt«  i 

Style        Assets      Publish            New  Stvle      Online  Stvles       Set  S 

A  La  Carte  Blue-Yellow 

- 

A  La  Carte  Gieen 

Body 

A  La  Carle  Seablue 

Abington 

Aichilek 

Bumps  -  Gunmelal 

1  Body  text  style  sample.  Lorem  ip  sum,  Dolor  sit 
1  arnet,  consectetueradipiseing  ©lit,  sad  diarn  nonurn. 

|  Bulleted  item  1 

Business  -  Green 
Citi-scape  -  Gold 

Cityscape  -  Teal 
Frada  -  Puiple 
Frada  Red 
Frado  -  Gieen 
Gardening 

Glasgow  -  Aqua  I  Oiange 
Glasgow  -  Gieen  I  Yellow 
Glasgow  -  Red  &  Blue 
Ikasl  -  Gold 
Ikast  -  Gieen 
Ikasl  -  Purple 
London  -  Blue  I  Gold 
London  -  Gieen  &  Puiple 
London  -  Maroon  1  Cocoa 

Normal  (P) 

.  Bulleted  item  2 

Paragraph  text  style  sample  Lorem  ip  sum.  Dolor  sit 
amet,  consectetueradipiscing elir,eed  diam  nonurn. 

1 .   Numbered  item  1 
2    Numbered  item  2 

Text  Object  style  sample.  Lorem  ip  sum,  Dolor  sit 
amet,  consectetueradipiscing  elit, sed  diam  nonum. 

Text  Navbar 

Heading  1 

Heading  2 

Heading  3 

Mountain 

Phoenix  -  Purple  ft  Slate 
Phoenix  -  Green  ft  Blue 
Phoenix  -  Teal  £  Gray 
Phoenix  Teal 

Solar  -  Yellow 
TP  Air  brushed  -  Gold 
Vienna  -  Gold  ft  Turquoise 
Vienna  -  Lavendar  ft  Canaiy 
Vienna  -  Red  ft  Dark  Giay 

Linked 
Visited  Link 
Active  Link 
Hover  Link 

zl 

Note:  The  text  styles  associated  with  lists  are  List,  Ordered  <0L>,  List,  Bulleted  <UL>,  and 
List  Item  <LI>.  Selecting  the  type  of  bullet  character  or  numbering  automatically 
selects  the  proper  text  style  from  the  ordered  or  bulleted  list.  Changing  the  <LI>  style 
affects  both  types  of  lists. 

The  Properties  palette  for  the  selected  text  element  appears. 


Attribute 

I 

font- family 

Arial,Helvetica,Geneva,£a... 

back  ground- co  I  or 

rgb(255.255.255] 

background-image 

url("lmagesrlback.ground.gi... 

^  I 

Changes  mi/Si  to  the  body  pfopeiiies  will  attecs 
elements  or  your  ensifi  site  such  as  tent  color 
jnd  layout  Certain  style  features  applied  to  the 
body  are  not  supported  by  .all  HTML  Generation 
Outputs.  You  can  change  your  output  type  In 
Site  Settings. 
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The  Attribute  column  shows  the  text  attributes  of  the  text  element.  The  Value 
column  shows  the  text  format  assigned  to  that  attribute. 

The  only  attributes  listed  are  those  that  have  been  edited.  A  text  element's 
default  attributes  are  not  listed. 

4.   Click  the  Format  button. 

The  Text  Format  dialog  appears. 

Character  |  Background  |  Custom  | 

Font:  Style: 


_?jx| 


an 

Automatic 

Agency  FB 

Algerian 

Architect 

Regular 

Italic 

Bold 

Bold  Italic 


-2 

-1  B 

0 

I  1 

Color:    [Automatic  |  Position: 

Letter  case:  [Automatic  Decoration: 
Small  caps:  [Automatic 


3 


[^Automatic 

□  Underline 

□  □verline 

□  Strikethrough 


This  preview  might  not  show  the  format  you'll  see  on  your  page  because  the  tent  might  be 
influenced  by  an  additional  style.  To  learn  about  the  scope  of  styles,  please  see  Help. 


5.   Edit  the  text  settings  and  click  OK.  See  "Formatting  Paragraphs"  on  page  148 
and  "Understanding  the  Automatic  Setting"  on  page  145  for  descriptions  of  the 
options  in  the  Text  Format  dialog. 

A  Note  about  the  Body  and  Normal  (P)  Text  Styles 

If  you  do  not  assign  a  font  to  the  Body  or  Normal  (P)  text  elements  and  leave  their 
text  styles  set  to  Automatic,  the  browser's  proportional  and  fixed  width  font  settings 
are  passed  through  to  the  SiteStyle  for  the  Body  text  and  Normal  (P)  text. 
Consequently,  if  you  leave  the  settings  as  Automatic,  Body  and  Normal  (P)  text 
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appear  in  Page  view  as  they  do  in  the  browser.  All  text  styles  in  the  site  are  affected 
by  these  settings.  This  helps  you  with  overall  page  design  because  you  can  see 
exactly  how  the  fonts  look  based  on  the  browser  settings.  Note  that  the  Body  and 
Normal  (P)  fonts  are  not  generated  when  you  publish  your  site.  They  are  derived 
from  the  site  visitor's  browser  settings. 

If  you  change  the  text  settings  applied  to  the  Body  text  element,  some  settings  might 
not  affect  the  body  text  on  your  pages.  The  inherited  settings  depend  on  the  HTML 
output  method  you  use  when  publishing  your  site.  The  following  table  shows  which 
settings  are  affected: 


Text  Attribute 

Dynamic  Page  Layout 

Regular  Tables 

font 

Y 

Y 

font  style 

Y 

N 

size 

N 

N 

color 

Y 

Y 

position 

N 

N 

case 

N 

N 

decoration 

N 

N 

small  caps 

N 

N 

Creating  a  SiteStyle 

You  can  create  original  styles  to  give  your  site  a  unique  look.  When  you  create  a  new 
SiteStyle,  each  graphic  element  is  saved  in  the  \lmages  folder  within  the  style's  folder 
in  the  NetObjects  Fusion  7\Styles  folder.  See  "Styles  Folder  Structure"  on  page  250. 

When  you  create  your  own  SiteStyle,  keep  these  points  in  mind: 

♦  When  you  use  an  animated  .gif  for  a  style  image,  only  the  first  frame  of  the 
animation  displays  in  the  image. 

♦  Text  labels  for  buttons  and  banners  are  placed  on  the  images.  If  you  want  the 
label  to  appear  above  or  below  the  image,  leave  space  above  or  below  the  image 
when  you  create  it  in  your  image  editing  application. 

♦  If  you  plan  to  use  your  SiteStyle  on  a  page  with  a  background  color  or  image, 
and  you  want  the  background  to  show  through  your  image,  make  sure  you  set 
the  background  to  Automatic  or  Transparent. 
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When  you  create  a  new  SiteStyle,  you  can  start  with  an  existing  SiteStyle  as  a 
template  or  a  blank  SiteStyle.  So,  before  you  create  a  new  SiteStyle,  select  an 
appropriate  SiteStyle  as  your  starting  point. 

To  create  a  SiteStyle: 

1.  Create  or  collect  images  for  your  banner,  buttons,  lines,  icons,  and  background. 

Use  an  image  creation  application  to  create  the  images.  To  be  included  in  a 
published  site  they  must  be  in  .gif,  jpg,  or  .png  format.  If  you  use  an  image  in 
.bmp,  .pcx,  .pet,  or  .fpx  format,  NetObjects  Fusion  can  convert  a  copy  of  the 
image  to  .gif  or  jpg  for  you. 

2.  In  Style  view,  click  the  New  Style  button  on  the  control  bar. 
The  New  Style  dialog  appears. 

3.  From  the  drop-down  list,  select  an  existing  SiteStyle  to  use  as  the  basis  for  your 
new  style  or  select  (none)  to  start  with  a  blank  SiteStyle. 


Style  name:  || 
Base  on:        |  (none) 

OK  | 

Cancel 

4.  Enter  a  name  for  your  new  SiteStyle  and  click  OK. 

Your  new  style  is  added  to  the  list  of  SiteStyles  and  is  selected.  NetObjects 
Fusion  also  creates  a  folder  in  the  \Styles  folder  to  contain  the  style  elements.  See 
"Styles  Folder  Structure"  on  page  250. 

The  elements  in  the  view  look  just  like  the  style  you  selected  as  the  basis  for  your 
new  style.  If  you  based  your  style  on  (none),  there  are  no  images  in  the  elements. 
The  Read  only  option  is  cleared  automatically  so  you  can  edit  the  style. 

5.  Edit  each  graphic  and  text  element  as  described  in  "Editing  the  Graphic 
Elements  of  SiteStyles"  on  page  235  and  "Editing  the  Text  Elements  of 
SiteStyles"  on  page  242. 

The  original  SiteStyle — the  one  you  based  your  new  design  on — is  not  affected 
by  your  edits. 
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Set  Style 


6.   Click  the  Set  Style  button  to  apply  the  new  style  to  your  site. 

Your  custom  SiteStyle  images  and  settings  are  applied  to  your  site. 


Managing  SiteStyles 


You  can  add  new  styles  to  the  list  of  available  styles,  such  as  those  you  obtain  from 
your  colleagues  or  those  you  create  on  your  own.  You  can  also  remove  styles  and 
synchronize  the  list  with  the  style  folders  currently  in  your  \Styles  folder.  SiteStyles 
are  stored  in  folders  labeled  with  the  style  name.  Text  styles  and  graphic  styles  are 
stored  separately,  and  new  text  styles  do  not  automatically  transfer  to  a  new  site. 
Because  NetObjects  Fusion  stores  a  list  of  SiteStyles  with  each  site  file,  you  must  add 
new  styles  you  obtain  to  your  site's  style  list  before  you  can  use  them. 

If  you  create  a  new  site  from  a  template,  your  new  site  contains  the  same  style  list  as 
the  site  from  which  the  template  was  made.  If  you  import  a  template  into  your 
current  site,  style  names  that  were  in  the  template's  style  list  are  added  to  your  site's 
style  list.  Templates  include  the  \Style  folder  for  the  template's  style. 

Adding  a  SiteStyle 

You  can  add  a  style  from  any  NetObjects  Fusion  style  folder  on  your  hard  disk 
drive,  CD-ROM,  or  LAN,  and  you  can  also  download  online  styles.  Whenever  you 
add  a  SiteStyle,  NetObjects  Fusion  adds  a  complete  copy  of  the  style's  folder  to  your 
NetObjects  Fusion  7\Styles  folder.  See  "Styles  Folder  Structure"  on  page  250. 

SiteStyles  from  earlier  versions  of  NetObjects  Fusion  do  not  include  all  style 
elements  available  in  NetObjects  Fusion  7.  If  you  import  an  older  style,  you  must 
update  the  style  to  be  compatible  with  the  new  features.  For  example,  NetObjects 
Fusion  version  3.0  and  earlier  did  not  have  the  rollover  style  for  buttons.  Thus,  if 
your  style  is  from  version  3.0  you  must  assign  button  rollover  styles  before  the 
navigation  bars  can  display  rollovers. 

Note:  When  you  add  a  style,  it  appears  in  the  list  of  styles  for  the  current  site  only.  If  you  want 
that  style  to  appear  in  the  style  list  of  every  new  site  you  create,  see  "Changing  an 
Existing  Template"  on  page  58. 
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Online  Styles 


To  add  a  local  SiteStyle  to  the  style  list: 

1.  In  Style  view,  from  the  Style  menu,  choose  Add  Local  Style  To  List. 
The  Open  dialog  appears. 

2.  Navigate  to  the  style  folder  of  the  style  you  want  to  import  and  select  its  .ssx  or 
.ssf  file.  Earlier  versions  of  NetObjects  Fusion  styles  have  the  extension  of  .ssf. 

3.  Click  Open. 

NetObjects  Fusion  adds  the  style  name  to  the  style  list. 
To  download  online  SiteStyles: 

1 .   In  Style  view,  click  the  Online  Styles  button  on  the  control  bar. 

Note:  You  must  be  connected  to  the  Internet  to  use  this  feature. 

The  NetObjects  Online  Style  Viewer  appears. 


!v  NetObjects  Online  Style  Viewer  ~  Web  Page  Dialog 


Select  a  style : 


A  La  Carte  Blue-Yellow 

A  La  Carte  Green 

A  La  Carte  Purple 

A  La  Carte  Seablue 

Abington 

Absinthe 

Allard 

Amazonia 

Antique 

Architek 

ArtDeco 

Astro 

Aztec 

Balance 


Banner 

•  • 

« 

• 

l«i  It  .1lf.il  Iril 

rpn 

•  • 

• 

• 

[chi  leiE       EhriEpli  TdU 

»  DjraUsI  recn 
*    DuaUsi  fccfi 


Install 


Close 


2.  Scroll  through  the  list  of  styles  and  select  the  style  you  want  to  download. 

3.  Click  Install. 

The  style  name  is  added  to  the  list  and  its  elements  are  added  to  the  styles  folder. 
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Adding  All  Available  SiteStyles 

Z>  In  Style  view,  from  the  Style  menu,  choose  Synchronize  Style  List. 

NetObjects  Fusion  updates  the  Style  list  of  the  active  site  to  match  the  contents 
of  the  \Styles  folder,  adding  and  removing  styles  as  necessary. 

Removing  SiteStyles 

You  can  remove  a  style  from  the  list  of  styles  in  the  current  site.  You  cannot  remove 
the  currently  applied  style.  When  you  remove  a  SiteStyle,  its  name  is  removed  from 
the  current  site  only.  Its  style  folder  and  the  associated  image  files  are  not  deleted, 
and  it  is  not  removed  from  any  other  sites. 

1 .  In  Style  view,  select  the  style  you  want  to  remove. 

2.  From  the  Style  menu,  choose  Remove  Style  From  List. 

3.  Click  Yes  to  confirm. 

The  style  is  removed  from  the  style  list  of  the  open  site.  It  remains  in  the 
NetObjects  Fusion  7\Styles  folder. 
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Styles  Folder  Structure 


Each  SiteStyle  stores  its  images,  text  styles,  and  graphic  styles  in  a  special  folder 
structure  in  the  NetObjects  Fusion  7\Styles  folder.  Images  are  stored  in  the  \l  mages 
folder.  Text  styles  are  defined  in  Style.css  and  graphic  styles  in  Style.ssx. 
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When  you  select  a  new  image  for  a  style  element,  NetObjects  Fusion  copies  it  into 
the  appropriate  folder  for  the  SiteStyle.  If  you're  editing  an  existing  SiteStyle,  the 
new  image  replaces  the  file  previously  assigned  to  that  element.  NetObjects  Fusion 
copies  the  new  image  to  the  folder,  but  doesn't  overwrite  the  old  file  unless  the  new 
and  old  files  have  identical  names. 

For  example,  suppose  you  want  to  modify  the  Mountain  SiteStyle  to  change  the 
highlighted  button  color.  First,  open  P3.gif  in  the  MountainMmages  folder  and  use  an 
image  editing  application  to  change  the  button's  color.  Give  the  new  image  file  any 
name  you  like.  Then  in  Style  view,  edit  the  Highlighted  Primary  Button  and  choose 
the  edited  image.  The  image  file  you  select  is  copied  to  the  Mmages  folder  in  the 
NetObjects  Fusion  7\Styles\Mountain  folder.  If  the  new  image  file  has  the  same  name 
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as  the  original  file,  the  original  is  overwritten.  Every  site  you  create  or  open  on  your 
machine  that  uses  the  Mountain  style  uses  this  file  for  highlighted  primary  buttons. 

This  applies  to  all  style  elements  that  you  can  base  on  images.  This  also  occurs  when 
you  replace  the  image  for  a  single  instance  of  a  button  or  banner.  See  "Change  a 
Button's  Image"  on  page  263  and  "Changing  a  Banner's  Image"  on  page  268. 


251 


Styles  Folder  Structure 


252 


CHAPTER  18 


Creating  Navigation  Bars 
and  Banners 

NetObjects  Fusion  includes  tools  you  can  use  to  create  banners  and  navigation  bars 
that  help  site  visitors  understand  and  navigate  the  structure  of  your  site.  A  new 
blank  site  includes  a  button  navigation  bar  on  the  left,  a  text  navigation  bar  at  the 
bottom,  and  a  banner  in  the  top  MasterBorder.  You  can  create  your  own  banners 
and  navigation  bars  and  place  them  in  any  MasterBorder  or  Layout  area. 

You  save  time  using  banners  and  navigation  bars  because  NetObjects  Fusion 
automatically  places  page  names  on  the  banner  and  links  navigation  bars  to  pages  in 
your  site.  Placing  navigation  bars  in  a  MasterBorder  and  then  assigning  the 
MasterBorder  to  multiple  pages  is  an  easy  way  to  give  pages  with  the  same 
navigational  needs  the  same  navigational  structure. 

New  banners  and  navigation  bars  you  create  use  elements  of  the  currently  selected 
SiteStyle.  However,  you  can  customize  the  banners  and  buttons  by  assigning  other 
styles  or  labels  or  by  replacing  their  images  with  your  own. 

This  chapter  tells  you  how  to  use  navigation  bars  and  banners,  including: 

♦  Adding  navigation  bars 

♦  Setting  navigation  structure 

♦  Setting  navigation  bar  properties 

♦  Adding  banners 

♦  Customizing  banners  and  navigation  bars 
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Working  with  Banners  and  Navigation  Bars 

Typically,  in  each  new  site  you  create,  NetObjects  Fusion  automatically  places  a 
banner  in  the  top  margin,  a  button  navigation  bar  in  the  left  margin,  and  a  text 
navigation  bar  in  the  bottom  margin.  You  can  place  banners  and  navigation  bars 
anywhere  on  the  page,  including  MasterBorders  and  Layouts,  as  well  as  inside  text 
boxes,  table  cells,  and  Layout  Regions. 


Banner 

Button  navigation  bar 
Button 

Text  navigation  bar 


Banner  titles  and  button  names  are  set  to  the  page  name  by  default.  You  can  change 
the  name  using  the  Custom  Names  button  in  Site  view,  the  Custom  Names 
command  on  the  Edit  menu,  the  settings  on  the  Navigation  Button  or  Banner 
Properties  palette  in  Page  view,  or  the  Custom  Navigation  Bar  dialog.  Buttons  are 
linked  according  to  your  site's  structure.  Whenever  you  change  the  SiteStructure  in 
Site  view,  NetObjects  Fusion  updates  the  buttons  and  banners. 

When  you  preview  or  publish  your  site,  NetObjects  Fusion  creates  a  .gif  file  for  each 
button  and  banner.  It  combines  the  assigned  font  style,  size,  and  color  with  the 
image  file  for  that  SiteStyle  element  to  ensure  the  font  you  choose  appears  despite 
differences  in  site  visitors'  browsers. 


Using  Navigation  Bars 

Navigation  bars  are  rows  or  columns  of  buttons  or  text  that  are  automatically  linked 
to  other  pages  in  your  site.  NetObjects  Fusion  provides  button  navigation  bars  and 
text  navigation  bars.  You  use  the  Button  Navigation  Bar  tool  and  the  Text 
Navigation  Bar  tool  to  add  navigation  bars  to  MasterBorders  or  page  Layouts. 

The  style  for  buttons  is  determined  by  the  SiteStyle  you  set  in  Style  view.  See 
Chapter  17,  "Using  SiteStyles."  The  SiteStyle  button  picture  is  automatically  applied 
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to  buttons  throughout  your  site.  You  can  change  the  button  style  for  an  individual 
navigation  bar  or  even  an  individual  button  without  changing  the  overall  SiteStyle. 
See  "Setting  Button  Navigation  Bar  Properties"  on  page  260  and  "Change  a 
Button's  Image"  on  page  263. 

You  can  assign  an  action  to  any  navigation  bar  using  the  Actions  tab  of  the 
Navigation  Bar  Properties  palette.  For  example,  a  navigation  bar  could  fly  in  from 
the  top  when  the  site  visitor  opens  the  page.  See  Chapter  22,  "Building  Dynamic 
Pages."  You  cannot  assign  an  action  to  an  individual  button. 


Button  Navigation 
Bar  tool 


Text  Navigation 
Bar  tool 


Adding  a  Navigation  Bar 

You  can  add  a  horizontal  or  vertical  button  or  text  navigation  bar  to  a  page. 

1 .  In  Page  view,  display  the  page  on  which  you  want  to  place  the  navigation  bar. 

2.  Select  the  Button  Navigation  Bar  tool  or  the  Text  Navigation  Bar  tool  from  the 
Navigation  flyout  on  the  Standard  toolbar. 

3.  Drag  a  box  in  the  MasterBorder  or  Layout  area  where  you  want  to  place  the 
navigation  bar. 

Drag  in  a  horizontal  direction  for  a  horizontal  navigation  bar  or  in  a  vertical 
direction  for  a  vertical  navigation  bar. 

A  new  navigation  bar  appears  with  buttons  or  text  linked  to  the  pages  indicated  in 
the  Navigation  structure  and  Multi  level  options  sections  of  the  General  tab  of  the 
Navigation  Bar  Properties  palette. 


Highlighted  button  . 


Button  navigation  bar   


■ 

--,  r-|j-r  t- 

■ 

Events 

#  January 

■ 

O  February 

■ 

Services 

About  Us 

Store 

■ 

■ 

5  IfclhlOl 

Display  - 


Type:  |  Primary 


Orientation:  J  Vertical 

Navigation  structure 
(*  Site:        |  First  Leyel 
C  Custom:  J^di^ustornJ 

Multi  leyel  options  


Include  home  page 
|~"  Include  parent  page 
[7  Include  child  pages 
^  Include  JavaScript  submenus 
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Setting  Navigation  Bar  Type 

You  can  choose  primary,  secondary,  or  text  navigation  bars. 

Primary  and  secondary  navigation  bars  offer  different  sets  of  button  pictures,  which 
are  defined  by  the  current  SiteStyle.  Other  than  the  pictures  displayed,  primary  and 
secondary  navigation  bars  function  the  same  way.  Because  secondary  button 
pictures  are  typically  different  in  size,  shape,  or  color,  you  can  use  a  secondary 
navigation  bar  to  visually  distinguish  links  to  different  parts  of  your  site.  For 
example,  to  help  site  visitors  understand  the  SiteStructure,  you  can  use  the 
secondary  navigation  bar  for  the  lower  levels  of  your  site.  To  see  the  difference 
between  primary  and  secondary  navigation  bars,  go  to  Style  view. 

Text  navigation  bars  provide  navigation  for  visitors  whose  browsers  cannot  display 
picture  buttons. 

To  set  navigation  bar  type: 

1.  In  page  view,  select  the  navigation  bar. 

The  General  tab  of  the  Navigation  Bar  Properties  palette  appears. 

2.  In  the  Display  section,  select  Primary,  Secondary,  or  Text  type. 


Note:  You  can  change  the  type  of  Child  page  and  JavaScript  submenu  buttons  on 
the  Advanced  tab  of  the  Navigation  Bar  Properties  palette. 

Setting  Navigation  Bar  Orientation 

1.  In  Page  view,  select  the  navigation  bar. 

The  General  tab  of  the  Navigation  Bar  Properties  palette  appears. 

2.  In  the  Display  section,  select  Vertical  or  Horizontal  orientation. 
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Setting  Navigation  Structure 

You  set  the  navigation  structure  to  specify  the  relationship  between  the  current 
page  and  the  pages  linked  to  the  buttons  on  the  navigation  bar.  You  can  base 
navigation  structure  on  the  site  structure  or  create  custom  navigation  bars  to  give 
visitors  access  to  pages  on  different  levels  of  the  site,  pages  in  other  sites,  and  files. 

Creating  Navigation  Bars  Based  on  the  SiteStructure 

You  can  choose  a  navigation  level  and  then  set  the  multi  level  options  to  add  links 
to  other  pages  in  the  site.  Go  to  Site  view  or  open  the  Site  Navigation  palette  if  you 
are  unsure  about  the  site  levels  you  want  to  link. 

Note:  If  you  create  a  navigation  bar  with  no  valid  links,  NetObjects  Fusion  displays  a  question 
mark. 

1 .  In  Page  view,  select  the  navigation  bar. 

The  General  tab  of  the  Navigation  Bar  Properties  palette  appears. 

2.  In  the  Navigation  structure  section,  choose  a  level  from  the  drop-down  list. 

♦  First  Level  links  to  the  children  of  the  Home  page. 

♦  Parent  Level  links  to  pages  in  the  level  above  the  current  page  in  the 
SiteStructure. 

♦  Current  Level  links  to  the  current  page  and  all  other  pages  that  share  the  same 
parent  page. 

♦  Child  Level  links  to  the  children  of  the  current  page. 

3.  In  the  Multi  level  options  section,  select: 

♦  Include  home  page  to  add  a  Home  page  link  to  the  navigation  bar. 

♦  Include  parent  page  to  include  a  link  to  the  parent  page  in  the  navigation  bar. 
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Include  child  pages  to  include  links  to  the  child  pages  in  the  navigation  bar. 
"  EI 
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Display  - 
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Include  home  page 
I™"  Include  parent  page 
[7  Include  child  pages 
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C  Custom:  & 
Multi  level  options 


Include  JavaScript  submenus  to  make  child  pages  not  included  in  the 
navigation  bar  visible  when  the  site  visitor  moves  the  pointer  over  the  parent 
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Creating  a  Custom  Navigation  Bar 

1 .  In  Page  view,  select  the  navigation  bar. 

The  General  tab  of  the  Navigation  Bar  Properties  palette  appears. 

2.  In  the  Navigation  structure  section,  select  Custom  and  click  Edit  Custom. 
The  Custom  Navigation  Bar  dialog  appears. 


Custom  Navigation  Bar 


I Internal  Link 


Link  type: 


□  Internal  links: 

1^  Home 

i  ^  Tours 

S-O  Events 

i  ^  January 

;  ^  February 

Services 
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i-Q  Store 
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Snow  Jacket 
O  Helmet 


|  T|  Find...      |      Find  Again  | 


Custom  navigation  bar: 


Link  Name 

Display  Name 

Imaqe 

Add> 

□  Home 

Home 

Standard 

Remove  | 

Remove  All  | 

Move  up  | 

Move  down  | 

3.   From  the  Link  type  drop-down  list,  select: 

♦  Internal  Link  to  link  to  another  page  in  the  site. 

Select  a  page  in  the  list  on  the  left  and  click  Add  to  move  it  into  the  list  on 
the  right,  or  drag  it  from  the  left  to  the  right. 

♦  External  Link  to  link  to  a  page  in  another  site.  Type  the  path  to  the  page  you 
want  to  link  to;  for  example,  http://www.netobjects.com  and  click  Add  to 
move  it  into  the  list,  or  drag  it  from  the  left  to  the  right. 

♦  File  Link  to  link  to  a  file.  Type  the  path  to  the  file  you  want  to  link  to  or  click 
Browse  to  locate  the  file,  click  Save,  and  then  click  Add  to  move  it  into  the 
list  or  drag  it  from  the  left  to  the  right. 
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If  your  site  has  many  pages  and  a  lot  of  links,  click  Find  to  search  for  a  specific 
link  in  the  list  of  current  links.  Click  Find  Again  to  search  for  the  next 
occurrence  of  the  same  link. 

4.  To  change  the  text  on  the  button  or  text  link,  click  in  the  Display  Name  column 
and  type  new  text. 

5.  In  the  Image  column,  choose  Standard,  Child,  or  Popup.  (Popup  is  not  available 
for  the  first  page  in  the  navigation  bar.) 

These  selections  correspond  to  the  display  type  you  selected  on  the  General  tab 
of  the  Navigation  Bar  Properties  palette  (Primary,  Secondary,  or  Text)  and  the 
button  type  you  selected  for  Child  pages  and  JavaScript  submenus  on  the 
Advanced  tab. 

For  example,  if  you  choose  Standard  in  the  Image  column,  it  will  be  a  primary 
button  if  the  display  or  button  type  is  Primary  and  a  secondary  button  if  the 
display  or  button  type  is  set  to  Secondary. 

If  you  are  customizing  a  text  navigation  bar,  this  option  is  not  available. 

6.  To  arrange  the  order  of  buttons  on  the  navigation  bar,  use  the  Move  up  and 
Move  down  buttons  or  simply  drag  the  buttons  into  position. 

To  remove  a  button,  select  it  and  click  Remove.  To  clear  the  list  and  start  over,  click 
Remove  All  and  click  Yes  to  confirm. 


Setting  Button  Navigation  Bar  Properties 

Set  Button  Style 

New  navigation  bars  use  the  currently  applied  SiteStyle,  but  you  can  set  individual 
navigation  bars  to  use  any  available  SiteStyle. 

You  can  also  choose  whether  the  button  for  the  current  page  will  be  highlighted  or 
not.  Use  button  highlighting  to  show  site  visitors  which  page  they  are  on.  If  you  are 
using  Auto  Frames,  be  aware  that  highlighting  affects  the  way  the  browser  refreshes 
your  page. 


A  highlighted  — 
button  indicates 
the  current  page 


1- 


You  can  also  enable  rollover  buttons  on  the  navigation  bar.  If  rollover  is  on,  when  a 
site  visitor  moves  the  pointer  over  the  button,  the  SiteStyle  rollover  image  appears. 
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To  set  the  button  style: 

1 .  In  Page  view,  select  the  navigation  bar. 

2.  Click  the  Background  tab  of  the  Navigation  Bar  Properties  palette. 


Navigation  Bar  Properties 


h  |Mo| 


Button  style 

(•  CurrentSiteStyle 

(~  Other:  |  Bumps  -  Gunmetal 
Use  highlighted  buttons 

\?  Use  roiioyer  buttons 
Background  color  

(*  None 

Color...  | 

Display  (in  pixels)  


Border:  [o     ^    Spacing:  [o  ^ 


3.   In  the  Button  style  section: 

♦  Select  Other  and  choose  a  SiteStyle  from  the  drop-down  list. 


Note:  You  can  change  the  SiteStyle  of  Child  page  and  JavaScript  submenu  buttons 
on  the  Advanced  tab  of  the  Navigation  Bar  Properties  palette. 

♦  Turn  highlighted  buttons  on  or  off. 

♦  Turn  rollover  buttons  on  or  off. 


Set  Button  Background 

You  can  set  a  background  color  for  a  button  navigation  bar.  A  background  color 
can  visually  unify  a  navigation  bar  if  buttons  are  widely  spaced;  it  can  also  help  site 
visitors  distinguish  the  navigation  bar  from  the  background  of  the  page. 

1 .  In  Page  view,  select  the  navigation  bar. 

2.  Click  the  Background  tab  of  the  Navigation  Bar  Properties  palette. 

3.  In  the  Background  color  section,  click  the  Color  button  and  select  a  color  from 
the  Color  Picker  or  select  None  to  use  no  background  color. 


261 


Using  Navigation  Bars 


Set  Border  Width  and  Button  Spacing 

You  can  set  the  thickness  of  a  button  navigation  bar's  border,  as  well  as  the  spacing 
between  buttons.  You  can  increase  the  spacing  between  buttons  to  let  the 
background  show  through  or  to  add  visual  breaks  around  buttons.  The  border  and 
spacing  are  measured  in  pixels  regardless  of  the  measurement  unit  you  select  in  the 
Options  dialog.  You  cannot  change  the  spacing  or  border  for  text  navigation  bars. 

To  set  button  border  and  spacing: 

1 .  In  Page  view,  select  the  navigation  bar. 

The  Navigation  Bar  Properties  palette  appears. 

2.  Click  the  Background  tab. 

3.  In  the  Display  (in  pixels)  section: 

♦  To  change  the  thickness  of  the  navigation  bar  border,  enter  a  number  in  the 
Border  field  or  click  the  arrows. 

♦  To  change  the  spacing  between  buttons,  enter  a  number  in  the  Spacing  field 
or  click  the  arrows. 

Change  a  Button's  Name 

By  default,  a  button  name  is  the  same  as  the  page  name. 
To  change  the  text  on  a  button: 

1.  In  Page  view,  navigate  to  the  page  containing  the  navigation  button  you  want  to 
change. 

2.  Double-click  the  button  to  select  it. 

A  wide  border  surrounds  the  button  to  show  it  is  selected. 
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The  General  tab  of  the  Navigation  Button  Properties  palette  appears. 


Navigation  Button  Propertie 


"I 


Page  name:  Tours 

\&  Use  £age  name  in  button 

Picture:  |  ^Styles^Sky  HighUmages\p1.gif 
Custom  Image...  | 
Rollover-    ^Sty|e^Sky  Highllmageslp2.gif 
Custom  Image...  | 


3.   In  the  Button  field,  type  a  new  name  for  the  button.  To  enter  two  lines  of  text, 
press  Enter  at  the  end  of  the  first  line. 

To  restore  the  default  page  name,  select  Use  page  name  in  button. 

This  changes  the  button  name  only  in  the  selected  navigation  bar.  To  change  the 
name  of  all  instances  of  this  button  on  all  navigation  bars,  use  the  Custom  Names 
dialog.  See  "Using  Custom  Button  and  Banner  Names  and  File  Extensions"  on 
page  43. 

Change  a  Button's  Image 

You  can  change  the  picture  on  each  individual  button  in  a  navigation  bar  in  Page 
view.  When  you  assign  a  new  picture  to  a  button,  NetObjects  Fusion  does  not 
display  the  page  name  or  custom  name  on  the  button.  If  you  want  text  to  appear  on 
the  button,  you  must  include  the  text  in  your  button  picture.  You  do  not  change  the 
current  SiteStyle  when  you  customize  a  button  picture. 

To  change  the  picture  for  one  button: 

1.  In  Page  view,  navigate  to  the  page  containing  the  navigation  button  you  want  to 
change. 

2.  Double-click  the  button  to  select  it. 

A  wide  border  surrounds  the  button  to  show  it  is  selected. 

The  General  tab  of  the  Navigation  Button  Properties  palette  appears. 
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3.  Double-click  the  selected  button,  or  click  Custom  Image  on  the  Properties 
palette. 

The  Picture  File  Open  dialog  appears. 

4.  Select  an  image  file  from  your  hard  disk  or  LAN.  If  you  want  to  use  an  image 
that  is  on  a  CD-ROM,  copy  it  to  your  hard  disk  first. 

The  selected  button  displays  the  new  picture.  To  restore  the  original  image,  click 
Default  Image  on  the  Navigation  Button  Properties  palette. 

Setting  Text  Navigation  Bar  Properties 

1.  In  Page  view,  select  a  text  navigation  bar. 

2.  Click  the  Background  tab  of  the  Navigation  Bar  Properties  palette. 


Navigation  Bar  Properties 


Background 
Color:  |  Automatic 


Jmage:  |  Automatic 

Delimiters  

Start:  [[  End:  []"" 

1     Include  delimiters  in  link 
Format  


Alignment:  ^ci 

|     Constrain  to  single  line 


Options  

I-  Lir.r    .jii-r.'  p  ,  i- 


3.  In  the  Color  field,  select: 

♦  Automatic  to  set  the  background  to  the  color  specified  in  the  Text  NavBar 
style  in  Style  view. 

♦  Transparent  to  set  the  background  to  the  background  color  specified  by  the 
parent  object  of  the  text  navigation  bar. 

♦  Color  to  select  a  background  color  from  the  Color  Picker.  The  selected  color 
appears  in  the  box  to  the  right  of  the  Color  field.  To  change  the  color,  click 
the  box  and  select  a  new  color  from  the  Color  Picker. 

4.  In  the  Image  field,  select: 

♦  Automatic  to  set  the  background  to  the  image  specified  in  the  Text  NavBar 
style  in  Style  view. 
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♦  None  to  eliminate  the  background  image. 

♦  Browse  to  select  an  image  from  the  Open  dialog.  See  "Choosing  an  Image 
Format"  on  page  178.  If  the  picture  is  smaller  than  the  navigation  bar,  the 
browser  tiles  the  image.  To  change  the  image,  click  the  Browse  button  to  the 
right  of  the  field. 

5.  In  the  Delimiters  section,  select  the  characters  you  want  to  use  before  and  after 
each  link  in  a  text  navigation  bar. 

The  default  characters  are  square  [brackets].  You  can  choose  angle  brackets,  or 
other  characters,  or  leave  this  blank. 

Select  Include  delimiters  in  link  to  extend  the  underline  to  include  these 
characters. 

[Home]  [Mission]  [Events]  [Activities]  [Highlights]  [Next Tour]  [Contest]  Delimiter 

Linked  page  Curren  t  page 

6.  If  you  are  working  with  a  horizontal  text  navigation  bar,  in  the  Format  section, 
you  can  select  Right,  Left,  or  Center  alignment. 

If  you  select  Constrain  to  a  single  line,  NetObjects  Fusion  increases  the  page 
width  to  accommodate  the  navigation  bar  on  a  single  line.  If  you  clear  this 
option,  you  can  reduce  the  width  of  the  navigation  bar  so  it  appears  on  more 
than  one  line. 

7.  By  default  all  pages  in  a  text  navigation  bar  are  linked  except  the  current  page. 
Select  Link  current  page  in  the  Options  section  to  include  a  link  to  the  current 
page. 

Text  navigation  bars  use  the  SiteStyle's  linked  text  color  and  the  style  set  for  the 
TextNavBar  object.  See  "Formatting  Text"  on  page  144  and  "Editing  a  Style 
Background"  on  page  241. 
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Setting  a  Navigation  Bar  Target 

When  a  site  visitor  clicks  a  navigation  bar  link,  you  can  target  a  frame  or  a  pop-up 
window  to  display  the  linked  page.  For  example,  if  you  select  _blank  as  the  link 
target,  the  page  you  link  to  appears  in  a  new  browser  window. 

1.  In  Page  view,  select  a  navigation  bar. 

2.  Click  the  Advanced  tab  of  the  Navigation  Bar  Properties  palette. 

3.  In  the  Navigation  bar  target  section,  select  a  target  from  the  drop-down  list  or 
click  New  Target  and  add  a  target. 


Navigation  Bar  Properties 


Button  Type:  |  Secondary  T[ 
*  Current  SiteStyle 

*~  Other:  |  A  La  Carte  Blue-Yello'  '  | 
JavaScript  submenus  - 


Button  Type:  |  Secondary  T[ 
(*  Current  SiteStyle 

Other:      |  a  La  Carte  Blue-Yellc  '  | 


Navigation  bar  target 


For  more  information  on  link  targets,  see  "Setting  Link  Targets"  on  page  283. 


Using  Banners 


Banners  are  picture  title  bars  that  display  the  name  of  the  page,  helping  site  visitors 
understand  where  they  are  in  your  site.  You  use  the  Banner  tool  to  add  new 
banners. 


Set  the  banner  name 
in  Site  view  or  on  the 
Banner  Properties 
palette 


You  can  assign  an  action  to  any  banner  using  the  Actions  tab  of  the  Banner 
Properties  palette.  For  example,  you  can  make  a  banner  "grow"  into  existence  when 
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Banner  tool 


a  site  visitor  goes  to  the  page  by  assigning  the  On  Page  Loaded  do  Transition  action 
with  the  transition  type  set  to  Iris.  See  Chapter  22,  "Building  Dynamic  Pages." 

Adding  a  Banner 

1.  In  Page  view,  go  to  the  page  on  which  you  want  to  place  the  banner. 

2.  Choose  the  Banner  tool  from  the  Navigation  flyout  of  the  Standard  toolbar. 

3.  Drag  a  box  in  the  MasterBorder  or  Layout  area  where  you  want  to  place  the 
banner. 

Drag  in  a  horizontal  direction  for  a  horizontal  banner  or  in  a  vertical  direction 
for  a  vertical  banner. 

A  new  horizontal  or  vertical  banner  appears  in  the  current  SiteStyle. 


Page  name:  Home 
|^  Use  page  name 

,.  |  es\MountainUmages\Banner.gif 

|  Custom  Image...  | 


(•  SiteStyle   

C  Other       |  A  La  Carte  Blue-Ye  t"[ 


f*  Horizontal        C  Vertical 


Changing  the  Banner  Text 

By  default,  the  banner  text  is  the  page  name,  but  you  can  specify  a  custom  name  or 
no  name  for  the  banner.  You  can  also  split  banner  text  into  two  lines.  The  style  of 
the  banner  text  is  determined  by  the  current  SiteStyle. 

To  change  the  banner  text: 

1.   In  Page  view,  select  the  banner. 
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The  General  tab  of  the  Banner  Properties  palette  appears. 

2.   In  the  Banner  field,  type  the  new  text  for  the  banner.  To  make  the  text  two  lines, 
press  Enter  at  the  end  of  the  first  line. 

To  restore  the  default  page  name,  select  Use  page  name. 

This  changes  the  name  only  on  the  selected  banner.  To  change  the  name  on  all 
banners  on  this  page,  use  the  Custom  Names  dialog.  See  "Using  Custom  Button 
and  Banner  Names  and  File  Extensions"  on  page  43. 

Changing  a  Banner's  Image 

You  can  change  the  picture  for  a  selected  banner  in  Page  view.  When  you  assign  a 
new  picture  to  a  banner,  NetObjects  Fusion  does  not  display  the  page  or  custom 
banner  name  on  the  image.  If  you  want  text  to  appear  on  the  banner,  you  must 
include  the  text  in  your  banner  graphic.  If  you  change  the  image  for  a  banner  in  a 
MasterBorder,  the  change  does  not  affect  the  banner  on  all  the  other  pages  that  use 
that  MasterBorder.  You  do  not  change  the  SiteStyle  when  you  customize  a  banner 
picture. 

To  change  the  picture  for  one  banner: 

1.  In  Page  view,  display  the  page  containing  the  banner  you  want  to  change. 

2.  Select  the  banner. 

The  General  tab  of  the  Banner  Properties  palette  appears. 

3.  Double-click  the  banner,  or  click  Custom  Image  on  the  Properties  palette. 
The  Picture  File  Open  dialog  appears. 

4.  Select  an  image  file  from  your  hard  disk  or  LAN.  If  you  want  to  use  an  image 
that  is  on  a  CD-ROM,  copy  it  to  your  hard  disk  first. 

The  selected  banner  displays  the  new  picture.  To  restore  the  banner  to  its  original 
image,  click  Default  Image  on  the  Banner  Properties  palette. 
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Setting  Banner  Style  and  Orientation 

New  banners  use  the  current  SiteStyle,  but  you  can  set  a  banner  to  any  available 
style.  If  you  change  the  style  of  a  banner  in  a  MasterBorder,  it  changes  on  every  page 
using  that  MasterBorder. 

1 .  In  Page  view,  select  the  banner. 

The  General  tab  of  the  Banner  Properties  palette  appears. 

2.  In  the  Style  section,  select  Other,  and  choose  a  different  style  from  the  drop- 
down list. 

3.  In  the  Display  section,  select  Horizontal  or  Vertical  orientation. 
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Creating  Links  and  Anchors 

NetObjects  Fusion  makes  it  easy  to  create  navigation  aids  using  links.  You  can  make 
any  text,  image,  shape,  or  area  of  an  image  into  a  navigation  aid  by  adding  a  link. 
Link  page  objects  to  any  point  on  the  Web,  including  points  within  your  site.  You 
can  also  create  and  link  to  anchors — markers  at  a  specific  location  on  a  page — to 
aid  navigation  in  long  pages. 

This  chapter  tells  you  how  to  create  and  use: 


♦ 

Internal  links 

♦ 

Anchors 

♦ 

Smart  links 

♦ 

External  links 

♦ 

Email  links 

♦ 

Relative  links 

♦ 

File  links 

♦ 

Link  targets 

♦ 

Links  with  added  HTML 

♦ 

Imagemaps 
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You  can  use  the  linking  techniques  described  in  this  chapter  to  manually  link 
objects  such  as  text,  pictures,  and  drawn  shapes  to  internal  locations  in  a  site  and 
external  locations  such  as  files  and  other  Web  pages.  As  you  organize  a  site,  you're 
likely  to  create  multiple  links  to  the  same  location.  You  can  easily  update  these  links 
using  the  lists  in  Assets  view. 

You  can  use  the  Link  button  on  the  Properties  palette  or  click  the  Link  tool  on  the 
Standard  toolbar  to  open  the  Link  dialog,  where  you  specify  the  destination  of  a 
link. 

Types  of  Links 

There  are  four  types  of  links,  each  with  its  own  options  in  the  Link  dialog: 

♦  Internal  link,  which  links  to  a  page  or  anchor  within  the  site. 

♦  Smart  link,  which  links  to  a  relative  position  in  the  site,  such  as  previous  page  or 
next  page.  Smart  links  are  sometimes  called  structural  links.  The  Blank  link, 
which  you  can  use  to  trigger  an  action  without  going  to  a  new  page,  is  also  a 
smart  link. 

♦  External  link,  which  links  to  a  page  in  another  site  via  a  URL,  using  a  protocol 
such  as  ftp,  mailto,  http,  or  JavaScript. 

♦  File  link,  which  links  to  a  file  that  visitors  can  download  from  the  site. 

Link  Indicators 

You  can  link  a  selected  object  or  text,  or  a  text  insertion  point. 

♦  If  you  Link  an  object,  the  Link  icon  indicates  the  object  is  linked. 

♦  If  you  select  text  and  link  it,  the  selected  text  is  underlined  and  appears  in  the 
default  font  and  color  for  links. 

♦  If  you  place  an  insertion  point  in  text  without  selecting  text,  the  link  name  is 
inserted  in  the  text. 
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Creating  an  Internal  Link 

Internal  links  link  to  pages  or  anchors  within  a  site.  If  you  move  a  linked  page  in  the 
SiteStructure  or  change  the  page's  name,  NetObjects  Fusion  automatically  updates 
all  associated  links.  Assets  view  lists  the  internal  links  in  your  site. 

Using  an  anchor,  you  can  link  to  a  specific  page  or  to  a  specific  location  on  the 
current  page.  See  "Adding,  Editing,  and  Deleting  an  Anchor"  on  page  275. 


Link  tool 


To  create  an  internal  link: 

1.  In  Page  view,  select  an  object  or  text  to  link. 

If  you  place  an  insertion  point  in  text  without  selecting  text,  the  link  name  is 
inserted  in  the  text. 

2.  Click  the  Link  tool  on  the  Standard  toolbar  or  the  Link  button  on  the  object's 
Properties  palette. 

The  Link  dialog  appears. 

3.  Select  Internal  Link  as  the  link  type. 


List  of all  pages  in  the 
site 


See  "Setting  Link 
Targets"  on  page  283 

See  "Adding  HTML  to  a 
Link"  on  page  285 


Li*  (»«     |  Internal  Link 
O  Internal  links: 
S" 


Home 
i   ~  Mission 
e|--0  Events 

n  Activities 

1  0  Highlights 

;  ^  Newt  Tour 

8  n  Contest 

:  ^  Wonder  Lodge 


C  Current  page 


"*"  |  Find  ..      |      Find  Again  | 


-  Target:      (*  None       C  Enisling: 


J" 


(none) 

Top 

Bottom 


~TJ     r  New: 


Link  Cancel 


Anchors 
on  the 
selected 
page 
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♦  If  you  are  linking  to  a  page,  select  the  page  in  the  SiteStructure. 


Link  l*P»:  |  Internal  Link 
0  Internal  links: 


O  Hoi 

{_}  Events 
n  Activities 

^  0  Highlights 

Newt  Tour 
^  Contest 
:  ^  Wonder  Lodge 


C  Current  page 


~*~  |  Find ..      |      Find  Again  | 


(none) 


Target:      (*  None       C  Enisling:  |_blanh 


~TJ     C  New: 


Cancel  | 


♦  If  you  are  linking  to  an  anchor  on  a  specific  page,  select  the  page  in  the 
SiteStructure  and  then  select  the  anchor  from  the  list  on  the  right. 


Litlk  IK*  I  Internal  Link 
O  Internal  links: 


Home 
O  Mission 
O  Events 
n  Activities 

 0  Highlights 

Newt  Tour 
^  Contest 
:  ^  Wonder  Lodge 


Current  page 


~*~  |  Find...      |      Find  Again  | 


(none) 


Target:      (*  None  Enisling: 


~TJ     r  New: 


Cancel  | 


4.  To  set  a  link  target,  see  "Setting  Link  Targets"  on  page  283. 
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Note:  You  may  not  need  to  select  a  frame  target.  NetObjects  Fusion  automatically 
targets  most  internal  links.  If  you  select  <none>,  NetObjects  Fusion  uses  the 
default  target,  which  depends  on  the  current  frame  setup. 

The  destination  page  for  the  link  appears  only  in  the  frame  you  select. 
5.   Click  Link. 

NetObjects  Fusion  creates  the  link.  When  a  site  visitor  clicks  the  linked  item,  the 
browser  displays  the  destination  page  or  the  selected  anchor. 

Adding,  Editing,  and  Deleting  an  Anchor 

An  anchor  marks  a  specific  location  on  a  page.  Anchors  let  site  visitors  go  directly  to 
a  particular  part  of  a  long  page  instead  of  scrolling  and  searching  for  information. 
You  can  place  an  anchor  anywhere  in  a  text  box  or  table,  or  on  a  picture  or  drawn 
shape.  You  link  to  an  anchor  using  the  Link  dialog.  When  a  site  visitor  clicks  the 
link,  the  browser  displays  the  page  containing  the  anchor,  beginning  at  the  location 
of  the  anchor. 

When  an  anchor  link  is  in  a  MasterBorder  or  AutoFrame,  use  the  Current  page 
option  in  the  Link  dialog  to  ensure  that  the  link  always  points  to  an  anchor  on  the 
current  page.  If  you  want  an  anchor  link  to  always  lead  to  a  specific  page,  select  the 
page  name  instead  of  the  Current  page  option  when  you  link  to  the  anchor. 

For  example,  suppose  your  Layout  contains  a  very  long  text  box.  You  place  anchors 
at  the  top  and  bottom  of  the  text  box,  and  in  the  MasterBorder,  you  link  the  words 
To  Top  to  the  top  anchor  and  the  words  To  Bottom  to  the  bottom  anchor.  In  the 
Link  dialog,  instead  of  choosing  the  current  page  name  in  the  Page  name  section, 
you  choose  the  Current  page  option.  If  you  copy  that  text  box  to  another  page  with 
the  same  MasterBorder  and  replace  its  content,  the  To  Top  and  To  Bottom  links 
still  work,  jumping  to  locations  on  the  current  page  instead  of  the  page  where  you 
made  the  links. 

To  add  an  anchor: 

1.   In  Page  view,  select  an  image  or  drawn  shape  or  double-click  to  place  the 
insertion  point  within  a  line  of  text. 

If  you  place  the  insertion  point  within  the  text  without  selecting  any  text,  the 
anchor  is  placed  at  the  location  of  the  insertion  point.  If  you  select  text,  the 
anchor  is  placed  at  the  beginning  of  the  selected  text. 
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2.   On  the  Standard  toolbar,  click  the  Anchor  tool. 

The  Add  Anchor  dialog  appears  listing  anchors  already  on  the  page. 


3.  Type  a  name  for  the  anchor  in  the  Name  field.  The  name  cannot  contain  spaces. 
Make  sure  each  anchor  has  a  different  name. 

4.  Click  OK. 

If  Object  Icons  is  checked  on  the  View  menu,  the  Anchor  indicator  appears  at  the 
anchor  location  on  the  page. 

To  edit  the  anchor,  select  the  anchored  text  or  object,  click  the  Anchor  button  on 
the  Properties  palette,  and  change  its  name  in  the  Change  Anchor  dialog.  To  delete 
the  anchor,  click  the  Anchor  icon  and  click  Remove  in  the  Change  Anchor  dialog.  If 
you  are  working  with  a  text  object,  you  can  click  the  anchor  icon  to  open  the 
Change  Anchor  dialog. 

Creating  a  Smart  Link 

Smart  links  lead  to  a  page  in  your  site  based  on  its  relative  position  in  the 
SiteStructure,  rather  than  its  name.  These  links  automatically  adjust  when  you 
change  the  SiteStructure.  For  example,  if  your  smart  link  leads  to  the  parent  of  the 
current  page,  and  you  move  the  current  page  to  a  different  parent,  NetObjects 
Fusion  updates  the  link  to  point  to  the  new  parent.  Sometimes  a  smart  link  is  called 
a  structural  link. 

To  create  a  smart  link: 

1.   In  Page  view,  select  some  text  or  select  an  object  to  link. 

If  you  link  to  a  text  insertion  point,  the  link  name  is  inserted  in  the  text. 
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See  "Setting  Link 
Targets"  on  page  283 

See  "Adding  HTML  to  a 
Link"  on  page  285 


2.  On  the  Standard  toolbar,  click  the  Link  tool. 
The  Link  dialog  appears. 

3.  Select  the  Smart  Link  type. 


Link  type: 


E 


Find  Again 


Name 

Description 

Home 

Links  to  your  Home  page. 

Up 

Links  to  the  parent  of  the  current  page. 

Next  Page 

Link?  to  'he  sibling  io  the  right  of  this  page  in  the  SiteSiructure. 

Previous  Page 

Links  to  the  sibling  io  the  left  of  this  page  in  the  SiieStructuie. 

First  Child  Page 

Links  to  the  first  child  page  of  the  current  page. 

Blank 

Creates  an  empty  JavaScript  link  that  can  be  used  to  assign  an  action. 

"Target:      (*  None       C  Existing: 


]     r  Nei 


J 


~j     Cancel  | 


Select  the  type  of  link  you  want.  The  links  listed  depend  on  the  type  of  page  you 
are  on — normal  or  stacked,  and  on  what  pages  are  available  to  link  to  from  the 
page  you  are  on. 

♦  Home  links  to  your  Home  page. 

♦  Up  links  to  the  parent  of  the  current  page. 

♦  Next  Stacked  Page  links  to  the  next  page  in  a  set  of  stacked  pages. 

♦  Previous  Stacked  Page  links  to  the  previous  page  in  a  set  of  stacked  pages. 

♦  Next  Page  links  to  the  sibling  to  the  right  of  this  page  in  the  SiteStructure. 

♦  Previous  Page  links  to  the  sibling  to  the  left  of  the  current  page  in  the 
SiteStructure. 

♦  First  Child  Page  links  to  the  first  child  page  of  the  current  page. 

♦  Blank  creates  an  empty  JavaScript  link  on  the  page  that  you  can  use  to  assign 
an  action. 

Click  Link. 


For  information  about  stacked  pages,  see  Chapter  26,  "Data  Publishing." 
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Creating  an  External  Link 

External  links  are  Universal  Resource  Locators  (URLs)  that  point  to  other  pages  and 
items  in  other  sites.  A  valid  URL  can  include  the  protocol,  host  name  or  DNS,  path 
name,  and  sometimes  a  file  name,  such  as  http://www.netobjects.com/products/ 
fusion.html.  Each  external  link  becomes  an  asset  of  the  site  that  you  can  update  in 
Assets  view. 

To  create  an  external  link: 

1.  In  Page  view,  select  some  text  or  select  an  object  to  link. 

2.  On  the  Standard  toolbar,  click  the  Link  tool. 
The  Link  dialog  appears. 

3.  Select  the  External  Link  type. 


New  link  list  with 
protocol  selected 


List  of  previously 
entered  links 


Name  of  link  in  - 
Assets  view 


See  "Setting  Link 
Targets"  on  page  283 

See  "Adding  HTML  to  a 
Link"  on  page  285 


Link  tiJpe:     |  External  Link  ^  Find  _      |      Find  Again  | 

-  New  link     |hltp://  | www.specialized.com 


J  Externa!  links: 


I  Content" 


NetObjects  Home  Page 
Specialized 


kttp:  //www.  netobjects.  com 
http://www.specielized.com 


"  Target:      t*  None       C  Enisling: 


~TJ     C  New: 


Cancel  | 


URL  entry 
field 


4.  Select  a  protocol  from  the  New  link  drop-down  list. 

If  you're  creating  a  link  that  does  not  require  a  protocol,  select  (none).  If  you 
want  to  use  a  protocol  that  is  not  in  the  drop-down  list,  you  can  type  it  in. 

5.  Enter  the  appropriate  information  in  the  URL  entry  field  and  click  Save,  or 
select  an  existing  link  from  the  list.  For  example,  you  could  enter  a  URL,  a 
mailto  address,  or  a  Java  command  depending  on  the  selected  protocol.  For 
details  about  email  links,  see  "Adding  an  Email  Link." 
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6.  If  you're  creating  a  new  external  link,  you  can  edit  the  default  name  for  this  link 
in  the  Name  column  by  double- clicking  in  the  column  field  and  typing. 

This  name  is  placed  in  the  text  if  you  do  not  select  text  or  an  object  to  link.  It 
appears  in  the  list  of  links  in  Assets  view  so  you  can  quickly  identify  and  sort  link 
destinations.  It  is  not  added  to  the  HTML  generated  when  your  site  is  published. 

7.  Click  Link. 

Note:  You  can  also  create  an  external  link  as  you  type.  If  your  text  includes  @  or ://, 
NetObjects  Fusion  automatically  creates  an  external  link. 

Adding  an  Email  Link 

To  add  a  mailto  link: 

1.  In  Page  view,  select  some  text  or  select  an  object  to  link. 

If  you  place  the  insertion  point  in  text  without  selecting  text,  the  email  address  is 
inserted  in  the  text  as  the  link. 

2.  On  the  Standard  toolbar,  click  the  Link  tool. 
The  Link  dialog  appears. 

3.  Select  the  External  Link  type. 

4.  Select  mailto  from  the  New  link  drop-down  list. 

5.  In  the  text  entry  field,  type  the  email  address  using  the  format 
username@domain.com. 

6.  Click  Link. 

7.  Preview  the  page. 

When  you  click  the  link,  the  browser's  email  client  displays  a  mail  window  with 
the  address  you  entered  in  the  recipient  field,  provided  the  browser  is 
configured  to  send  email  using  the  HTML  mailto  command. 
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Adding  a  Relative  Link 

Relative  links  are  important  if  you  must  link  to  files  that  are  published  separately. 
Relative  links  protect  the  links  on  your  pages  if  your  ISP  moves  or  changes  the 
server  location.  To  create  a  relative  link,  you  must  know  where  the  destination  file  is 
relative  to  the  file  containing  the  link. 

For  example,  suppose  you  publish  a  site  using  the  by  Site  Section  publishing  option. 
Your  company  PR  department  wants  to  place  HTML  documents  on  the  server,  but 
publish  them  separately  from  the  main  Web  site.  The  PR  department  has  its  own 
Articles  directory  on  the  server  at  the  root  of  the  site.  There  is  also  a  News  directory 
and  the  index  page  for  the  site  at  the  root  of  the  site.  The  structure  looks  something 
like  this: 

index.html 
/News 

news.html 
/Articles 

PressRelease1.html 

PressRelease2.html 

The  main  News  page  is  published  in  the  News  directory.  You  must  create  a  relative 
link  to  link  the  news.html  page  to  the  articles  in  the  Articles  directory. 

To  create  a  relative  link: 

1.  In  Page  view,  select  some  text  or  select  an  object  to  link. 

2.  On  the  Standard  toolbar,  click  the  Link  tool. 
The  Link  dialog  appears. 

3.  Select  the  External  Link  type. 

4.  Select  (none)  from  the  New  link  drop-down  list. 

5.  In  the  text  entry  field,  type  the  relative  path  from  the  news  page  to  the  press 
release  page.  For  example: 

../Articles/PressReleasel  .html 

You  cannot  test  this  link  by  previewing,  because  it  requires  the  exact 
configuration  of  files  that  only  exists  on  the  server.  However,  after  you  publish 
the  site  and  the  PR  department  uploads  articles  into  the  Articles  directory,  the 
link  will  work  correctly. 
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When  typing  the  path,  if  you  do  not  include  periods  or  slashes  in  front  of  the  file 
name,  NetObjects  Fusion  attempts  to  find  the  file  in  the  same  directory  as  the 
page  containing  the  link.  This  is  also  true  for  the  format  ./filename.html.  To  back 
up  one  directory  before  looking  for  the  path,  use  ../path/filename.html.  For  each 
directory  you  need  to  back  up  to  find  the  destination  file,  include  another  ../.  For 
example,  suppose  you  create  a  Press  Releases  page  in  a  directory  called  PR  within 
the  News  directory: 

index.html 
/News 

news.html 

/PR 

PRIinks.html 
/Articles 

PressRelease1.html 
PressRelease2.html 

A  link  from  PRIinks.html  to  PressReleasel  .html  looks  like  this: 

../../Articles/PressReleasel.html 

Remember  that  some  servers  are  case  sensitive;  your  link  must  exactly  match  the 
directory  names  and  file  names  of  where  you  want  to  go. 

6.   Click  Link. 

Creating  a  File  Link 

You  use  file  links  to  link  to  a  file.  For  example,  you  might  create  a  file  link  so  site 
visitors  can  download  the  file.  When  you  create  a  file  link,  the  file  it  refers  to 
becomes  an  asset  of  the  site  and  is  uploaded  to  the  server  when  the  site  is  published. 

To  create  a  file  link: 

1.  In  Page  view,  select  some  text  or  select  an  object  to  link. 

If  you  place  the  insertion  point  within  the  text  without  selecting  text,  the  file 
name  is  inserted  in  the  text. 

2.  On  the  Standard  toolbar,  click  the  Link  tool. 
The  Link  dialog  appears. 

3.  Select  the  File  Link  type. 
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Converts  linked  file  ■ 
to  HTML 

List  of  file  links 
previously  entered 


^9 

Link  t^pe: 
File  path: 


|  File  Link 
Browse 


3 


J 


Find  Agai 


J  JCANetO ejects  Fusion  7\TutorialV\clivities.doc 
— J-  Convert  to  HTML  document  when  publishing 


-Location 
offile 


I  Path 


See  "Setting  Link 
Targets"  on  page  283 
See  "Adding  HTML  to  a 
Link"  on  page  285 


-Target:      t*  None       C  Enisling: 


]     r  Nera: 


Cancel  | 


The  File  path  field  displays  the  path  to  the  file  and  the  Name  column  displays 
the  name  that  appears  as  the  link  if  no  text  or  object  is  selected. 

4.  Click  Browse,  select  a  file  in  the  Open  dialog,  and  click  Save. 

5.  If  necessary,  enter  or  edit  the  Name. 

This  name  appears  as  the  link  if  no  text  or  object  is  selected  and  also  in  the  list  of 
links  in  Assets  view  so  you  can  quickly  identify  and  sort  link  destinations.  It  is 
not  added  to  the  HTML  generated  when  your  site  is  published. 

6.  Select  Convert  to  HTML  document  when  publishing  so  all  site  visitors  can  view 
the  document.  If  your  linked  file  remains  in  its  original  format,  it  can  only  be 
opened  by  applications  that  support  that  file  type.  This  feature  only  works  with 
.doc,  .mew,  .xls,  and  .rtf  files. 

7.  Click  Link. 


Note:  The  way  the  linked  file  opens  for  site  visitors  depends  on  the  configuration  of  their 
browser  and  Web  server.  Test  the  link  in  the  appropriate  browsers  before  publishing 
the  site. 
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Setting  Link  Targets 

As  explained  in  "Understanding  Frames"  on  page  132,  when  a  site  visitor  clicks  a 
link  placed  within  a  frame,  the  browser  has  to  know  where  to  display  the  results. 
The  frame  that  displays  the  retrieved  content  is  the  target  of  the  link;  when  you 
specify  which  frame  is  to  display  the  results  of  a  link,  you  are  targeting  that  frame. 
NetObjects  Fusion  includes  four  default  targets.  Choose: 

♦  Jblank  to  load  the  specified  link  into  a  new  browser  window. 

♦  _self  to  replace  the  frame  where  the  link  resides  with  the  document  of  that  link. 
This  is  similar  to  how  links  behave  on  sites  with  no  frames. 

♦  _parent  to  load  the  designated  content  into  the  current  window's  parent.  If  the 
current  frame  has  no  parent  the  content  is  loaded  into  the  same  frame  as  the 
element  that  refers  to  this  target. 

♦  _top  to  load  the  designated  content  into  the  full,  original  window.  This  cancels 
all  other  frames.  If  the  current  frame  has  no  parent  the  content  is  loaded  into  the 
same  frame  as  the  element  that  refers  to  this  target. 

To  display  the  designated  content  in  a  new  named  window,  you  can  create  a  new 
link  target. 

To  set  a  link  target: 

1.  In  Page  view,  select  the  object  or  text  that  you  want  to  link. 

2.  Click  the  Link  tool  on  the  Standard  toolbar. 
The  Link  dialog  appears. 

3.  Select  the  type  of  link  you  are  targeting:  Internal  Link,  Smart  Link,  External 
Link,  or  File  Link  and  set  up  the  link.  See  "Creating  Links"  on  page  272. 

4.  In  the  Target  area,  click  Existing  and  from  the  drop-down  list  choose  the  target 
frame  in  which  you  want  to  display  the  linked  information. 


Target:      f  None       (*  Existing: 

body  T 

r  New: 

HTML...  | 

LeftFrame 

blank 
_self 
_parent 

top 

|     Link     |     Cancel  | 
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To  display  the  designated  content  in  a  new  named  window,  click  New  and  type  a 
name  for  the  window.  If  a  window  with  that  name  already  exists,  the  content  is 
displayed  in  the  existing  window. 

You  may  not  need  to  assign  a  target.  NetObjects  Fusion  automatically  targets 
most  internal  links  for  you. 

5.  Click  Link  to  close  the  dialog  and  create  the  link. 

6.  Preview  the  page  to  test  your  targeted  links. 


Following  Links 

If  Object  Icons  is  checked  on  the  View  menu,  NetObjects  Fusion  displays  the  Link 
icon  wherever  you  create  a  link  to  an  object.  If  you  place  the  pointer  over  the  icon, 
the  link  is  displayed  in  the  status  bar  at  the  bottom  of  the  NetObjects  Fusion 
window. 

Text  links  are  underlined  and  appear  in  the  default  font  and  color  for  links. 
In  Page  view,  you  can  follow  a  link  you  created  to  its  target  page  or  anchor: 

♦  Right-click  a  linked  object  and  select  Follow  Link  from  the  shortcut  menu  or 
select  the  object  and  from  the  Go  menu,  choose  Follow  Link. 

♦  To  follow  a  text  link,  select  the  linked  text,  right-click,  and  select  Follow  Link 
from  the  shortcut  menu. 


Finding  a  Link 

As  the  number  of  pages  in  your  site  grows,  the  number  of  links  will  probably 
increase  as  well.  NetObjects  Fusion  makes  it  easy  for  you  to  find  a  link. 

1 .  Open  the  Link  dialog. 

2.  Click  the  Find  button. 


The  Find  link  type  Link  dialog  appears. 


iFind  Internal  Link 

H 

1  Beains  with  1 

H  Contains 

Find 

Cancel 

|Ends  with  | 
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3.  Select  criteria  for  the  search,  enter  the  text  you  want  to  search  for,  and  click 
Find. 

NetObjects  Fusion  finds  the  first  link  that  satisfies  your  criteria. 

4.  To  find  the  next  link  that  matches  the  criteria,  click  Find  Again. 

Editing  or  Removing  a  Link 

To  edit  a  link,  select  the  linked  text  or  object,  click  the  Link  button  on  the  Properties 
palette  or  Standard  toolbar,  then  change  the  link  in  the  Link  dialog.  If  an  external 
link  is  used  in  multiple  places  in  your  site,  you  can  update  all  instances  by  editing 
the  link  in  Assets  view. 

To  remove  a  link,  select  it,  click  Link  on  the  Properties  palette  or  Standard  toolbar, 
and  click  Unlink  in  the  Link  dialog.  You  cannot  remove  a  link  in  Assets  view,  but 
you  can  verify  all  instances  of  a  link.  If  you  unlink  every  instance  of  a  link,  it  is 
removed  automatically. 

You  can  insert  HTML  and  JavaScript  before,  inside,  and  after  links.  See  "Adding 
HTML  to  a  Link."  You  can  also  use  a  link  to  trigger  an  action  using  the  Blank  link. 
See  "Adding  an  Action  to  Linked  Text"  on  page  320. 

Adding  HTML  to  a  Link 

You  can  add  your  own  HTML  or  JavaScript  to  a  link  to  extend  its  capabilities.  For 
example,  you  might  want  to  add  HTML  that  directs  the  browser  to  open  the  link  in 
a  new  window,  or  JavaScript  that  displays  a  dialog.  The  steps  below  demonstrate 
how  to  add  HTML  that  directs  the  browser  to  open  the  link  in  a  new  window.  For 
more  information,  see  "Accessing  an  Object's  HTML"  on  page  422. 

1.  In  Page  view,  select  some  text  or  an  object  to  link. 

2.  On  the  Standard  toolbar,  click  the  Link  tool. 
The  Link  dialog  appears. 

3.  Select  a  link  type. 

4.  Click  the  HTML  button  in  the  Link  dialog.  If  the  HTML  button  is  not  available, 
the  object  does  not  allow  additional  HTML. 

The  Link  HTML  dialog  appears. 
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5.  Click  the  Inside  Link  tab  to  indicate  where  you  want  to  add  HTML  or 
JavaScript. 

6.  If  you  want  the  link  to  open  the  page  in  a  new  window,  type  target=NewWindow. 

As  you  type,  the  top  part  of  the  dialog  displays  your  code  in  blue  type  as  it  will 
appear  in  the  HTML  NetObjects  Fusion  generates. 


Generated  HTML: 

Insert  Field... 

Insert  File... 

1 

<A  HREF- " _ /nert  taur.html"  t ac get -NewWindow> < /A> 

Before  Link    Inside  Link  |  After  Link  | 

II  target-Hew¥indow| 

d 

 i 

1    <*  1 

Cancel  | 

7.  Click  OK  in  the  Link  HTML  dialog. 

8.  Click  Link  in  the  Link  dialog. 

When  you  preview  or  publish  the  site,  the  link  opens  a  new  browser  window. 

Working  with  Imagemaps 

An  imagemap  can  contain  several  links  in  a  single  picture.  You  create  an  imagemap 
by  drawing  hotspots  on  a  picture.  You  can  link  as  many  hotspots  as  you  like  in  a 
single  image,  but  the  hotspots  cannot  overlap  or  extend  beyond  the  edge  of  the 
picture.  Because  the  imagemaps  you  create  with  the  following  procedure  do  not 
require  a  CGI  script  running  on  the  server,  they  are  called  client-side  imagemaps. 
Server-side  imagemaps  require  setup  on  a  Web  server  to  run  properly. 

To  create  a  single  link  on  a  picture,  you  do  not  need  to  use  an  imagemap  unless  you 
only  want  to  link  part  of  the  image.  Imagemaps  are  only  necessary  to  create  multiple 
links  on  one  object. 
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Creating  an  Imagemap 

_ .  I  1.   In  Page  view,  click  the  Hotspot  tool  on  the  Standard  toolbar,  and  select  the 

T "  I  appropriate  tool  from  the  flyout  to  create  a  rectangular,  circular,  or  polygon 

Hotspot  tool  hotspot. 

2.  Draw  a  hotspot  on  an  image. 

If  you  are  using  the  Polygon  Hotspot  tool,  you  must  click  to  establish  each 
vertex  of  the  polygon,  then  double-click  to  complete  the  hotspot  shape. 

The  Link  dialog  appears. 

3.  In  the  Link  dialog,  select  a  link  type — internal,  smart,  external,  or  file. 
See  "Creating  Links"  on  page  272. 

4.  Select  a  destination  for  the  link  and  click  the  Link  button. 

Once  a  picture  has  hotspots,  you  can  move  it  anywhere  on  the  page  and  even  copy 
and  paste  it  elsewhere  in  the  site  without  affecting  the  imagemap. 

Editing  an  Imagemap 

To  edit  an  existing  hotspot,  click  the  hotspot.  The  General  tab  of  the  Hotspot 
Properties  palette  appears. 

♦  To  edit  the  link,  click  Link  on  the  Properties  palette  or  the  Standard  toolbar.  The 
Link  dialog  appears,  displaying  the  link  information.  Change  the  link 
destination  or  click  Unlink  to  remove  the  link. 

♦  To  add  HTML  to  a  hotspot,  click  HTML.  See  "Accessing  an  Object's  HTML"  on 
page  422. 

♦  To  assign  an  action  to  a  hotspot,  click  its  Actions  tab  on  the  Properties  palette 
and  follow  the  procedure  described  in  "Adding  Actions  to  Objects  and  Pages" 
on  page  315. 

♦  To  resize  a  hotspot,  select  it  and  drag  its  handles. 

♦  To  create  an  alt  tag  for  the  hotspot,  type  in  the  AltTag  field.  The  alt  tag  appears 
when  the  browser  does  not  display  the  image. 

♦  To  create  multiple  hotspots  on  an  imagemap,  create  one  hotspot,  copy  it,  and 
paste  it  on  the  image.  The  pasted  hotspot  appears  in  the  upper-left  corner  of  the 
imagemap.  Move  the  hotspot  to  the  appropriate  location  and  edit  the  link. 
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CHAPTER  20 


Placing  Media 

Media  such  as  sound  and  video  give  a  site  impact.  The  tools  in  NetObjects  Fusion 
make  it  easy  to  add  a  variety  of  media  files  to  your  pages.  To  find  sample  media  files, 
visit  Online  view. 

This  chapter  tells  how  to  add: 

♦  Flash  files 

♦  Shockwave  files 

♦  QuickTime  movies 

♦  Windows  Media  Player  files 

♦  Sound  files 

♦  Plugins 
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Inserting  a  Flash  File 


Flash  tool 


With  Flash  from  Macromedia,  you  can  create  rich  Internet  content  and 
applications.  NetObjects  Fusion  supports  Flash  (.swf)  and  Splash  (.spl)  files. 

To  insert  a  Flash  file: 

1.  In  Page  view,  select  the  Flash  tool  from  the  Dynamic  Media  flyout  on  the 
Advanced  toolbar. 

2.  Draw  a  box  to  indicate  the  Flash  file's  location  on  the  page. 
The  Open  dialog  appears. 

3.  Select  a  Flash  file  from  your  hard  disk  or  LAN,  or  select  a  Flash  file  already  in  use 
in  the  site  from  the  Plug-in  Assets  tab. 

For  information  about  using  assets,  see  Chapter  28,  "Managing  Assets." 

4.  Click  Open. 

The  Flash  placeholder  appears  on  your  page,  and  the  Flash  Properties  palette 
appears.  The  name  of  the  selected  file  appears  in  the  File  field  on  the  General 
tab. 


U.I.IJUMJJUJ.I 


Idol 


File:  |addContent_y1.swf  Browse...  | 
AltTagJ 

Version:  1 5,0,0,0 


5.  To  provide  text  for  the  browser  to  display  if  it  cannot  play  the  Flash  file,  enter  a 
description  in  the  AltTag  field.  See  "Adding  and  Modifying  Alt  Tags"  on 

page  80. 

6.  To  play  the  latest  Flash  movies,  you  sometimes  must  change  the  version.  You 
can  find  complete  information  at  www.macromedia.com/support/flash/ts/ 
docu  ments/test_version.htm. 
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7.  Click  the  HTML  button  to  insert  HTML  tags  and  scripts.  See  Chapter  27, 
"Working  with  HTML  Directly." 

8.  Click  the  Controls  tab. 


Shockwave  Flash  Properties            I  f  ! 

□ 

Q 

- 

Qu 

AN, 

AutoStart 
|  Loop 


;uality  jAutoLow 
ale  |ShowAII 
Alignment  |  Left 


9.  To  control  the  display  when  using  anti-aliasing,  select  a  Quality  option. 

♦  AutoLow  sets  the  default  to  normal  quality.  The  host  computer  uses  high 
quality  if  it  has  the  capacity. 

♦  AutoHigh  starts  the  movie  in  high  quality.  The  host  computer  uses  low 
quality  if  it  cannot  display  the  movie  in  high  quality. 

♦  High  anti-aliases  the  movie  on  any  computer. 

♦  Low  uses  a  normal  quality  so  the  movie  displays  quickly. 

10.  To  determine  how  the  movie  fits  in  the  image  frame,  select  a  Scale  option. 

♦  ShowAII  displays  the  movie  within  the  frame  but  maintains  the  image 
proportions. 

♦  NoBorder  displays  the  movie  so  it  fills  the  frame  but  maintains  the  ratio  of  the 
animation.  Some  edges  of  the  animation  might  be  trimmed. 

♦  ExactFit  displays  the  movie  exactly  within  the  frame. 

11.  To  specify  the  movie's  alignment  within  the  frame,  select  an  Alignment  option, 
such  as  Left,  Bottom,  or  Top  Right. 

12.  To  play  the  movie  automatically  when  the  site  visitor  opens  the  page,  select 
Auto  Start. 


13.  To  replay  the  movie  when  it  ends,  select  Loop. 
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You  can  add  an  action  to  an  object  using  the  Actions  tab.  See  Chapter  22,  "Building 
Dynamic  Pages." 

Inserting  a  Shockwave  File 

With  Shockwave  from  Macromedia,  you  can  create  multimedia,  graphics,  and 
audio  that  downloads  quickly.  NetObjects  Fusion  supports  these  Shockwave  file 
formats: 

♦  Shockwave  for  Director  4.0  and  5.0  (.dcr) 

♦  Director  (.dir)  5.0  or  greater 

♦  Protected  Director  (.dxr) 

To  view  these  files,  site  visitors  must  install  the  Shockwave  plugin  appropriate  for 
their  browser  and  platform.  These  plugins  are  available  from  the  Macromedia  Web 
site  at  www.macromedia.com. 

You  cannot  directly  add  a  Shockwave  audio  (.swa)  file  to  a  page.  You  must  embed  it 
in  a  Director  movie  by  passing  it  as  a  parameter  to  the  movie,  and  place  the  movie 
on  your  page.  Then  in  Assets  view,  add  the  Shockwave  audio  file  as  a  file  asset.  Any 
Shockwave  files  you  place  on  a  page  appear  inline  on  the  page  itself. 

To  insert  a  Shockwave  file: 

In  Page  view,  select  the  Shockwave  tool  from  the  Dynamic  Media  flyout  on  the 
Advanced  toolbar. 

Draw  a  box  to  indicate  the  Shockwave  Director  file's  location  on  the  page. 
The  Open  dialog  appears. 

Select  a  Shockwave  Director  file  from  your  hard  disk  or  LAN,  or  select  a 
Shockwave  Director  file  already  in  use  in  the  site  from  the  Plug-in  Assets  tab. 

For  information  about  using  assets,  see  Chapter  28,  "Managing  Assets." 

Click  Open. 

The  Macromedia  Shockwave  placeholder  appears  on  your  page,  and  the 
Shockwave  Director  Properties  palette  appears. 

For  most  file  formats,  NetObjects  Fusion  sizes  the  Shockwave  placeholder  to  fit 
the  stage,  which  is  the  space  where  the  animation  appears.  If  automatic  sizing 
does  not  occur,  you  must  size  the  object  manually.  Check  that  you  have  the 
right  browser  plugin  or  ActiveX  control  installed.  Before  NetObjects  Fusion  can 




Shockwave  tool 


2. 
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automatically  set  height  and  width  parameters  for  Macromedia  Director 
movies,  you  must  install  the  Macromedia  Director  ActiveX  control  (version 
6.0.1  or  later)  or  the  Macromedia  Director  Netscape  plugin  (version  6.0.1  or 
later).  To  obtain  the  ActiveX  control,  create  a  site  with  NetObjects  Fusion  that 
contains  a  Director  movie,  then  preview  the  site  with  Microsoft  Internet 
Explorer.  The  ActiveX  control  is  automatically  downloaded  and  installed.  If  you 
don't  have  Internet  Explorer,  you  can  download  the  current  Macromedia 
Director  plugin  at  www.macromedia.com/shockwave/download. 

The  name  of  the  selected  file  appears  in  the  File  field  on  the  General  tab  of  the 
Properties  palette. 


|  Shockwave  Director  Properties  V 

 Mlol 

File:     |test.dcr                    Browse...  | 
AltTag:| 

Version:  J  3,0,0,0 

HTML...  | 

5.  To  provide  text  for  the  browser  to  display  if  it  cannot  play  the  Shockwave  file, 
enter  a  description  in  the  AltTag  field.  See  "Adding  and  Modifying  Alt  Tags"  on 
page  80. 

6.  Click  the  HTML  button  to  insert  HTML  tags  and  scripts.  See  Chapter  27, 
"Working  with  HTML  Directly." 

7.  Click  the  Controls  tab. 
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8.   Click  the  option  you  want,  enter  the  parameter,  and  click  the  check  mark. 


Shockwave  Director  Propert 


nil!  'iiS  |o  | 


r 


swColor 


swForeColor 
swBackColor 
swPassword 
:  ^Banner 


If  you've  worked  with  Director  files,  you  should  be  familiar  with  these  options.  For 
information,  see  your  Shockwave  or  Director  user  guide. 

You  can  add  an  action  to  an  object  using  the  Actions  tab.  See  Chapter  22,  "Building 
Dynamic  Pages." 


QuickTime  tool 


Inserting  a  QuickTime  Movie 


QuickTime,  developed  by  Apple  Computer,  is  a  multimedia  software  architecture 
used  to  create  and  deliver  graphics,  sound,  video,  text,  music,  and  3D  media.  You 
can  use  the  QuickTime  tool  to  place  QuickTime  movies. 

To  display  QuickTime  movies,  site  visitors  must  install  the  QuickTime  plugin 
appropriate  to  their  browser  and  platform.  For  more  information  on  QuickTime, 
visit  Apple  Computer's  site  at  www.apple.com/quicktime/. 

To  insert  a  QuickTime  movie: 

1.  In  Page  view,  select  the  QuickTime  tool  from  the  Digital  Video  flyout  on  the 
Advanced  toolbar. 

2.  Draw  a  box  to  indicate  the  location  of  the  QuickTime  movie. 
The  Open  dialog  appears. 

3.  Select  a  QuickTime  file  from  your  hard  disk  or  LAN,  or  select  a  QuickTime  file 
that  was  already  used  in  the  site  on  the  Video  Assets  tab. 


For  information,  see  Chapter  28,  "Managing  Assets." 
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QuickTime  media  has  a  .mov  or  .qt  extension. 
4.   Click  Open. 

The  QuickTime  placeholder  and  the  QuickTime  Properties  palette  appear. 
Resize  the  QuickTime  placeholder  if  necessary. 


QuickTime  Properties  HHE5I 


■a \ji  o  ] 

File:  I  Leader,  mow  Browse. 
AltTag:  [~^^^^^^^^^^^ 

-  Display  

f*  Play  jnline 

C°  Launch  from  picture: 


HTML. 


The  name  of  the  file  you  selected  appears  in  the  File  field  on  the  General  tab.  To 
select  a  different  movie  file,  click  the  Browse  button. 

5.  To  provide  text  for  the  browser  to  display  when  it  cannot  play  a  movie,  enter  a 
description  in  the  AltTag  field. 

6.  In  the  Display  section,  select: 

♦  Play  inline  to  position  the  movie  in  the  browser  window  in  the  same  location 
as  the  placeholder. 

♦  Launch  from  picture  to  use  a  picture  to  represent  the  movie  on  the  page  and 
play  it  in  a  new  browser  window  when  the  site  visitor  clicks  the  picture.  You 
can  use  the  placeholder  icon  or  click  Browse  and  select  a  different  image  file. 

7.  Click  the  HTML  button  to  insert  HTML  tags  and  scripts.  See  Chapter  27, 
"Working  with  HTML  Directly." 
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8.  On  the  Controls  tab,  set  the  sound  volume  for  the  movie.  You  can  enter  a 
number  from  0  to  256. 

II  II  I  I 

Volume:  1 256  ~H 
Display  options   1 

I-  Hide  all 
W  Controller 

V  Autostart 

V  Loop 

r-  Back  and  forth 

|^         n. ir.  'j.  -i  :  ■  j  i.- 

I 

9.  In  the  Display  options  section,  select: 

♦  Hide  all  if  you  don't  want  to  show  the  movie  but  want  to  use  it  only  as 
background  sound.  This  option  does  not  work  if  you  choose  Launch  from 
picture  on  the  General  tab. 

♦  Controller  to  display  a  control  bar  that  site  visitors  can  use  to  start  or  stop  the 
movie.  This  option  is  not  available  when  Hide  all  is  selected  and  it  does  not 
work  if  you  choose  Launch  from  picture  on  the  General  tab. 

♦  Autostart  to  automatically  start  playing  the  movie  when  the  page  loads. 

♦  Loop  to  replay  the  movie  when  it  comes  to  the  end.  To  replay  the  movie  from 
the  end  to  the  beginning,  select  Back  and  forth. 

10.  To  store  the  movie  in  the  cache  on  the  site  visitor's  system,  select  Keep  movie  in 
user's  cache.  If  the  visitor  leaves  the  page  and  comes  back,  the  movie  doesn't 
have  to  be  downloaded  again  because  it  is  already  in  the  system  cache. 

You  can  add  an  action  to  an  object  using  the  Actions  tab.  See  Chapter  22,  "Building 
Dynamic  Pages." 
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Windows  Media 
Player  tool 


Inserting  a  Windows  Media  Player  File 

You  can  add  video,  such  as  an  animation  or  a  movie,  to  a  site.  To  view  these  files, 
site  visitors  must  install  the  appropriate  plugin  for  their  browser  and  platform. 

The  latest  browsers  often  have  video  players  built  in.  For  example,  Microsoft 
Internet  Explorer  uses  Windows  Media  Player.  To  ensure  that  site  visitors  can  view 
your  video,  provide  a  link  to  a  site  from  which  they  can  download  the  appropriate 
plugin. 

NetObjects  Fusion  supports  these  video  file  formats: 

♦  Windows  Media  (.wm,  .wmv,  .asf,  .asx,  .avi,  .wax,  .wma) 

♦  MPEG  (.mpg,  .mpeg,  .m1v,  .mp2,  .mpa,  .mpe,  .mpv2,  .m3u,  .mp2v) 

To  insert  a  Windows  Media  Player  file: 

1.  In  Page  view,  select  the  Windows  Media  Player  tool  from  the  Digital  Video 
flyout  on  the  Advanced  toolbar. 

2.  Draw  a  box  to  indicate  where  you  want  to  position  the  video. 
The  Open  dialog  appears. 

3.  Select  a  video  file  from  your  hard  disk  or  LAN  or  select  a  video  file  already  used 
in  the  site  from  the  Video  Assets  tab. 

For  information  about  using  assets,  see  Chapter  28,  "Managing  Assets." 

4.  Click  Open. 
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The  Windows  Media  placeholder  appears  on  the  page,  and  the  Windows  Media 
Player  Properties  palette  appears.  The  selected  file  name  appears  in  the  File  field 
on  the  General  tab. 


Windows  Media  Player  Properties^- 


-J*] 


B  |o| 

File     [mLLpeanutTwmy         Browse...  | 


5.  To  provide  text  that  the  browser  displays  if  it  cannot  display  the  video,  enter  the 
text  in  the  AltTag  field. 

6.  In  the  Display  section,  select: 

♦  Inline  to  display  a  control  that  site  visitors  can  use  to  play  the  video. 

♦  Icon  to  select  one  of  the  three  images  to  represent  the  video.  The  video  plays 
in  a  viewer  or  on  a  new  blank  page. 

♦  Picture  to  use  another  image  file  to  represent  the  video.  Click  Browse  and 
choose  an  image  file.  The  video  plays  in  a  viewer  or  on  a  new  blank  page. 

7.  Click  the  HTML  button  to  insert  HTML  tags  and  scripts.  See  Chapter  27, 
"Working  with  HTML  Directly." 

You  can  add  an  action  to  an  object  using  the  Actions  tab.  See  Chapter  22,  "Building 
Dynamic  Pages." 


Inserting  a  Sound  File 

Sounds  are  either  digital  or  synthesized  audio  files  that  a  browser  with  a  built-in 
player  or  helper  application  can  play.  Visitors  can  also  download  helper 
applications  from  sound  technology  developers  and  install  them  in  their  browsers. 
To  play  sounds,  a  system  must  have  a  sound  card  and  speakers. 

NetObjects  Fusion  supports  the  following  popular  audio  file  formats: 
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Sound  tool 


♦  Windows  Wave  (.wav)  format  sound  files  that  play  on  Windows  and  the  Mac 
OS.  For  the  Mac  OS,  site  visitors  must  have  Netscape  3.x  or  later. 

♦  Audio  Interchange  File  format  (.aif)  with  browser  plugins  can  play  on  Windows 
95,  98,  NT,  2000,  and  ME,  and  the  Mac  OS. 

♦  Musical  Instrument  Digital  Interface  (.midi,  .mid)  can  play  on  almost  all  types  of 
operating  systems. 

♦  Sun's  .au  format  is  used  in  Java  applets  and  can  play  on  UNIX  based  operating 
systems. 

♦  RealAudio  (.ra,  .ram,  .rm)  can  play  streaming  audio  on  all  systems,  requires 
RealAudio  Web  server-resident  software,  and  sometimes  includes  video.  Site 
visitors  must  install  the  RealAudio  player  browser  plugin. 

♦  Rich  Music  Format  (.rmf)  is  a  sound  file  format  that  enhances  the  use  of  music 
and  sound  in  interactive  environments,  such  as  the  Web. 

You  can  also  add  any  of  these  formats  as  a  background  sound  that  plays  when  a 
visitor  views  your  page.  See  "Setting  Layout  and  Layout  Region  Background 
Properties"  on  page  110. 

Because  an  audio  file  has  no  visual  object,  NetObjects  Fusion  represents  the  audio 
file  with  a  graphic,  usually  an  icon  or  an  inline  player  control  bar  that  the  browser 
recognizes.  When  a  site  visitor  clicks  the  icon  or  the  play  button  on  the  inline  player 
control  bar,  the  browser  plays  the  sound  file  or  opens  a  helper  application  to  play  it. 

To  insert  a  sound  file: 

1.  In  Page  view,  select  the  Sound  tool  from  the  Plug-ins  flyout  on  the  Advanced 
toolbar. 

2.  Click  on  the  page  to  indicate  the  location  of  the  sound  file. 
The  Open  dialog  appears. 

3.  Select  a  sound  file  from  your  hard  disk  or  LAN,  or  select  a  sound  file  already 
used  in  the  site  from  the  Audio  Assets  tab. 

For  information  about  using  assets,  see  Chapter  28,  "Managing  Assets." 

4.  Click  Open. 
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The  default  sound  icon  appears  on  the  page,  and  the  Sound  Properties  palette 
appears.  The  name  of  the  file  you  selected  appears  in  the  File  field  on  the 
General  tab.  You  can  use  the  Browse  button  to  select  a  different  sound  file. 


Sound  Properties 


o  ]o] 


File:  |  BeepHM.WAV 
Altjag:  | 


C  Inline 

•      ©  1 

P  Picture:  | 


5.  To  provide  text  that  the  browser  displays  if  it  cannot  play  the  sound,  type  a 
description  in  the  AltTag  field. 

6.  In  the  Display  section,  select: 

♦  Inline  to  use  the  audio  player  for  your  browser.  If  site  visitors  have 
Headspace  Beatnik  installed  on  their  system,  the  browser  uses  that  player  to 
play  the  sound. 

♦  Icon  to  select  one  of  the  three  images  to  link  to  the  sound. 

♦  Picture  to  select  another  image  file  as  the  visual  link  to  the  sound.  Click 
Browse  and  select  an  image  file. 

7.  Click  the  HTML  button  to  insert  HTML  tags  and  scripts.  See  Chapter  27, 
"Working  with  HTML  Directly." 

You  can  add  an  action  to  an  object  using  the  Actions  tab.  See  Chapter  22,  "Building 
Dynamic  Pages." 


Inserting  a  Real  Player  File 

RealAudio  (.ra,  .ram,  .rm)  can  play  streaming  audio  on  all  systems,  requires 
RealAudio  Web  server-resident  software,  and  sometimes  includes  video.  Site 
visitors  must  install  the  RealAudio  player  browser  plugin. 

To  insert  a  Real  Player  file: 
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1.  In  Page  view,  select  the  Real  Player  tool  from  the  Plug-ins  flyout  on  the 
Advanced  toolbar. 

2.  Click  on  the  page  to  indicate  the  location  of  the  Real  Player  file. 
The  Open  dialog  appears. 

3.  Select  a  Real  Player  file  from  your  hard  disk  or  LAN,  or  select  a  file  already  used 
in  the  site  from  the  Video  Assets  tab. 

For  information  about  using  assets,  see  Chapter  28,  "Managing  Assets." 

4.  Click  Open. 

The  Real  Player  placeholder  graphic  appears  on  the  page,  and  the  Real  Player 
Properties  palette  appears.  The  name  of  the  file  you  selected  appears  in  the  File 
field  on  the  General  tab.  You  can  use  the  Browse  button  to  select  a  different  file. 


*|o| 


File  |ice_wanna_be.rr 


5.  To  provide  text  that  the  browser  displays  if  it  cannot  play  the  video,  type  a 
description  in  the  AltTag  field. 

6.  In  the  Display  section,  select: 

♦  Inline  to  display  a  control  that  site  visitors  can  use  to  play  the  video  sound 
track. 


Note:  If  you  select  this  option,  site  visitors  do  not  see  the  video.  They  only  hear  the 
soundtrack. 

♦  Icon  to  select  one  of  the  three  images  to  represent  the  video.  When  a  site 
visitor  clicks  the  icon,  Real  Player  opens  playing  the  specified  video. 
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♦  Picture  to  use  another  image  file  to  represent  the  video.  When  a  site  visitor 
clicks  the  icon,  Real  Player  opens  playing  the  specified  video. 

7.   Click  the  HTML  button  to  insert  HTML  tags  and  scripts.  See  Chapter  27, 
"Working  with  HTML  Directly." 

You  can  add  an  action  to  an  object  using  the  Actions  tab.  See  Chapter  22,  "Building 
Dynamic  Pages." 

Inserting  Other  Types  of  Files 

Although  NetObjects  Fusion  supports  a  wide  variety  of  media  files,  you  might  have 
other  formats,  such  as  Adobe  Acrobat  PDF  files,  that  you  want  to  include  in  your 
site.  You  can  place  other  files,  including  Adobe  Acrobat,  VRML,  RealSpace  FlashPix 
files,  and  Headspace  Beatnik  files,  using  the  Plug-In  tool. 

When  a  site  visitor  clicks  the  document's  icon,  the  file  appears  in  the  visitor's 
browser  or  downloads  to  the  visitor's  system.  When  you  insert  a  file  using  the  Plug- 
In  tool,  site  visitors  need  the  appropriate  plugin  for  their  browser  and  platform  to 
use  the  file. 

To  insert  a  file  using  the  Plug- In  tool: 

In  Page  view,  select  the  Plug-In  tool  from  the  Plug-ins  flyout  on  the  Advanced 
toolbar. 

Draw  a  box  to  indicate  where  you  want  to  position  the  file. 
The  Open  dialog  appears. 

Select  a  file  from  your  hard  disk  or  LAN,  or  select  a  file  that  was  already  used  in 
the  site  from  the  Plug-in  Assets  tab. 

To  display  the  various  file  types  that  NetObjects  Fusion  supports,  use  the  Files  of 
type  drop-down  list. 

To  insert  a  file  that  is  not  explicitly  supported  by  NetObjects  Fusion,  choose  All 
Files  in  the  Files  of  type  drop-down  list,  then  select  the  file. 

Click  Open. 


1. 


Plug-In  tool  2. 


3. 
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The  plug-in  placeholder  image  appears  on  your  page,  and  the  Plug-In  Properties 
palette  appears.  The  name  of  the  file  you  selected  appears  in  the  File  field  on  the 
General  tab. 


Plug-In  Properties 


*]*]o 


File:      jVelcome.pdf  Browse... 


333 


(•  Playjnline 

C  Launch  from  picture: 

|  Plugln.gif 


5.  To  provide  text  for  the  browser  to  display  if  it  cannot  display  the  file,  enter  a 
description  in  the  AltTag  field. 

6.  In  the  Display  section,  select: 

♦  Play  inline  to  display  the  file  on  the  page  in  your  site. 

♦  Launch  from  picture  to  use  a  picture  other  than  the  plug- in  icon  to  represent 
the  plugin.  When  site  visitors  click  the  image,  the  plugin  opens  in  the 
window.  Click  Browse  and  select  an  image  file. 

7.  Click  the  HTML  button  to  insert  HTML  tags  and  scripts.  See  Chapter  27, 
"Working  with  HTML  Directly." 

8.  Select  the  Advanced  tab. 
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The  Advanced  options  appear. 


*  *]o] 


Parameters 


Use  the  Parameters  section  to  add  custom 
settings  to  the  plugin.  You  cannot  change 
the  plugin's  standard  parameters,  such  as 
height  and  width 


9.   Set  the  parameters.  Because  you  can  add  different  parameters  for  different  files, 
see  the  associated  user  guide. 

♦  To  edit  parameters  that  appear  in  the  Parameters  section,  double-click  the 
parameter.  Enter  the  value  in  the  Add  Plug-In  Parameter  dialog. 

♦  To  add  a  parameter,  click  the  plus  (+)  button  and  enter  the  parameter  name 
and  value  in  the  Add  Plug-In  Parameter  dialog. 

♦  To  remove  a  parameter,  select  it  and  click  the  minus  (-)  button. 

♦  To  change  the  order  of  the  parameters,  click  the  Up  or  Down  arrow  buttons. 
The  selected  parameter  moves  up  or  down  in  the  parameters  list. 

You  can  add  an  action  to  an  object  using  the  Actions  tab.  See  Chapter  22,  "Building 
Dynamic  Pages." 


Sites  are  constantly  changing  and  evolving.  As  you  build  your  site  or  after  using  it 
for  some  time,  you  might  want  to  change  a  media  file  that  you  used  in  a  specific 
location.  You  can  replace  one  file  with  another. 

To  replace  a  media  file  with  a  new  file: 

1.  In  Page  view  or  Assets  view,  double-click  the  media  placeholder  on  your  page. 
The  Open  dialog  appears. 

2.  Select  the  new  file  and  click  Open. 


Replacing  a  Media  File 
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Adding  Java  and  ActiveX 

You  can  make  your  site  more  interesting  and  interactive  by  adding  special 
applications,  such  as  Java  applets,  Java  Beans,  or  ActiveX  controls.  NetObjects 
Fusion  tools  make  it  easy  to  insert  these  items  and  set  their  properties.  To  choose 
appropriate  properties  settings,  you  should  be  familiar  with  Java  or  ActiveX  before 
you  add  these  types  of  application  files  to  your  site.  A  sample  Java  applet  is  available 
in  the  NetObjects  Fusion  7\Java\Applets  folder;  sample  Java  Beans  are  available  in  the 
NetObjects  Fusion  7\Java\Beans  folder. 

This  chapter  describes  how  to  add: 

♦  Java  applets  and  servlets 

♦  Java  Beans 

♦  ActiveX  controls 
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Java  tool 


Inserting  a  Java  Applet  or  Servlet 

Java  applets  and  servlets  are  an  efficient  way  to  add  sound  and  animation,  such  as 
scrolling  messages  and  color  cycling  buttons,  to  a  page.  Java  applets  and  servlets  are 
platform- independent  applications  with  compact  file  sizes.  Usually,  Java  applets 
and  servlets  run  from  the  client  platform,  which  means  site  visitors  download  and 
run  them  from  a  browser;  however,  servlets  can  include  commands  that  are 
executed  on  the  server.  Most  browsers  are  Java-compatible,  so  site  visitors  don't 
need  special  plugins  to  run  a  Java  applet. 

To  insert  a  Java  applet  or  servlet: 

1.  In  Page  view,  select  the  Java  tool  from  the  Web  Applications  tools  flyout  on  the 
Advanced  toolbar. 

2.  Draw  a  box  to  indicate  the  position  of  the  Java  applet  or  servlet. 
The  Open  dialog  appears. 

3.  Select  a  Java  file  from  your  hard  disk  or  LAN,  or  select  one  that  is  currently  used 
in  the  site  from  the  Java  Class  Assets  tab.  See  Chapter  28,  "Managing  Assets." 

The  extension  for  a  Java  file  is  .class  or  .jar. 

4.  Click  Open. 

The  Java  placeholder  image  appears  on  the  page,  and  the  Java  Properties  palette 
appears.  The  path  to  the  fde  you  selected  appears  in  the  File  field  on  the  General 
tab.  To  select  a  new  file,  click  Browse,  find  the  file,  and  click  Open. 


Java  Properties 


m  ]as]o 


ZEE 


File:  |  pletsUed_clock. class  Browse..  | 
Class:  |  led_clock.class  j*] 


(*  Applet      C  Serulet 


Additional  Files.. 


HTML...  | 


The  current  .class  file  is  displayed  in  the  Class  field. 
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You  can  also  drag  a  Java  .class  file  from  Windows  Explorer  onto  your  page.  The 
Java  placeholder  appears  on  the  page,  and  you  can  set  the  Java  properties  for 
that  file. 

5.  To  provide  text  for  the  browser  to  display  if  it  cannot  display  the  file,  enter  a 
description  in  the  AltTag  field. 

6.  Select  Applet  or  Servlet  depending  on  which  type  of  file  you  are  inserting. 

7.  If  your  applet  or  servlet  requires  additional  files,  click  the  Additional  Files 
button,  then  click  Add  in  the  Java  Applet  Files  dialog. 


Java  Applet  Files 


led  clock,  class 


|*  Add 

Delete  | 

OK 

Cancel  | 

This  list  shows  all  the  .class 
files  that  NetObjects 
Fusion  detects  for  the 
selected  Java  applet  or 
servlet 


8.  Select  another  file  in  the  Add  Java  Applet  Files  dialog,  and  click  Open.  Click  OK 
to  add  the  selected  file. 

To  delete  a  .class  file  from  the  Class  list,  click  the  Additional  Files  button  and 
select  the  appropriate  file  in  the  Java  Applet  Files  dialog.  Click  Delete,  then  click 
OK. 

9.  To  add  parameters  to  the  Java  applet,  click  the  Parameters  tab. 


Java  Properties 


S  4]o| 

r~ 


EES 


Name             |  Value 

ledcolor 

backcolor 

framecolor 

clock_mode 

time_mode 

Parameter  info- 


string 

color  of  the  characters  (en.  green) 


+  - 


307 


Inserting  a  Java  Bean  Component 


This  guide  assumes  you  are  familiar  with  Java  and  understand  the  effects  of 
setting  these  parameters.  In  some  cases,  Java  developers  provide  documentation 
that  explains  the  parameters. 

♦  To  edit  parameters,  double-click  the  parameter  and  enter  a  value  in  the 
Enter  Value  dialog. 

For  servlets,  you  can  specify  that  the  value  is  an  initialization  value  for  the 
parameter  by  checking  Value  is  an  initializer  in  the  Enter  Value  dialog. 

♦  To  learn  more  about  each  parameter,  look  in  the  Parameter  info  section. 

♦  To  remove  a  parameter,  select  it  and  click  the  minus  (-)  button. 

♦  To  add  a  parameter,  click  the  plus  (+)  button  and  enter  a  name  and  value  in 
the  Enter  Value  dialog. 

♦  To  change  the  order  of  the  parameters  in  the  generated  HTML,  click  the  Up 
or  Down  arrow  buttons.  The  selected  parameter  moves  up  or  down  in  the 
Parameters  list. 


Inserting  a  Java  Bean  Component 

Java  Beans  are  a  type  of  Java  applet.  Unlike  Java  applets,  which  require  .class  files 
plus  other  types  of  files,  Java  Beans  are  an  all-in-one  implementation  of  Java.  A 
single  .jar  file  contains  everything  required  to  run  the  applet. 

To  insert  a  Java  Bean: 

1.  In  Page  view,  select  the  Java  Bean  tool  from  the  Web  Applications  tools  flyout 
on  the  Advanced  toolbar. 

2.  Draw  a  box  to  indicate  the  position  of  the  Java  Bean. 
The  Open  dialog  appears. 

3.  Select  a  Java  Bean  file  from  the  NetObjects  Fusion  7\Java\Beans  folder,  or  select 
one  that  is  currently  used  in  the  site  from  the  Java  Archive  Assets  tab. 

A  Java  Bean  file  can  have  a  jar  or  .class  extension.  Most  Java  Beans  have  a  .jar 
extension,  but  some  jar  files  might  not  be  Java  Beans.  If  you  try  to  open  a  jar  file 
that  is  not  a  bean,  you  see  a  message  from  NetObjects  Fusion. 

4.  Click  Open. 
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The  Java  Bean  placeholder  appears  on  the  page.  Beans  have  different  icons  in  the 
upper  right  corner  of  the  placeholder;  the  icon  is  created  by  the  bean's  author 
and  has  no  effect  on  the  bean  or  its  behavior. 

The  path  to  the  file  you  selected  appears  in  the  File  field  on  the  General  tab  of 
the  Java  Bean  Properties  palette.  To  select  a  different  file,  click  Browse,  find  the 
file,  and  click  Open.  The  current  .class  file  is  displayed  in  the  Class  field. 


Java  Bean  Properties 


333 


File:  |  eZoneClockBean.jar  Browse..  | 
Class:  |  TimeZoneClockBean. class  j^j 


Altjag:  r 


(*  Applet     V  Serylet 


Additional  Files.. 


5.  To  provide  text  for  the  browser  to  display  if  it  cannot  display  the  file,  enter  a 
description  in  the  AltTag  field. 

6.  Select  Applet  or  Servlet  depending  on  the  type  of  bean  you  are  inserting. 

7.  If  the  bean  requires  other  files,  click  the  Additional  Files  button,  then  click  Add 
in  the  Java  Applet  Files  dialog. 

8.  Select  another  file  in  the  Add  Java  Applet  Files  dialog,  and  click  Open.  Click  OK 
to  add  the  selected  file. 
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9.   Click  the  Properties  tab. 


Java  Bean  Properties 


333 


clockBorderColor 

#0066FF 

clockTickColor 

HOObbFF 

background  color 

|        |  ttFFFFFF 

pulldownFontColor 

HOOOOOO 

dateColor 

|        |  ttFFFFFF  ' 

pulldownColor 

|        |  ttFFFFFF 

-  Parameter  info 
jaya.awt.Font 
pulldownFont 


Different  beans  have  different  sets  of  properties.  This  guide  assumes  you  are 
familiar  with  Java  Beans  and  understand  the  effects  of  setting  these  properties. 
In  some  cases,  Java  Bean  developers  provide  documentation  that  explains  the 
properties. 

10.  To  edit  a  property,  select  the  appropriate  field.  Some  properties  require  you  to 
choose  a  color  or  enter  a  value  in  a  dialog.  Other  properties  toggle  True/False  or 
require  you  to  type  text.  In  some  cases  properties  appear  that  have  no  affect  on 
the  bean  or  its  behavior. 

11.  Click  the  Parameters  tab. 

If  you  know  the  bean's  internal  parameters,  you  can  add  or  remove  them. 

♦  To  add  a  parameter,  click  the  plus  (+)  button  and  enter  a  name  and  value  in 
the  Enter  Value  dialog. 

♦  If  there  are  parameters  listed,  to  remove  one,  select  it  and  click  the  minus  (-) 
button. 

♦  To  change  the  order  of  the  listed  parameters,  select  a  parameter  and  click  the 
Up  or  Down  arrow  buttons. 

12.  Publish  the  page  to  see  how  the  bean  works. 

You  can  add  actions  to  Java  Beans  using  the  Actions  tab.  When  you  choose  a  Java 
Bean  as  the  target  or  source  of  an  action,  you  see  an  expanded  selection  of  available 
actions  or  trigger  events  as  appropriate.  See  Chapter  22,  "Building  Dynamic  Pages." 
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ActiveX  Control  tool 


Inserting  an  ActiveX  Control 


You  use  ActiveX  controls  to  embed  an  application  in  a  Web  page.  Microsoft 
Internet  Explorer  3.x  or  later  supports  ActiveX  controls  with  which  you  can  add 
custom  capabilities  such  as  audio  and  movie  players,  calendars,  custom  buttons, 
and  forms  to  your  pages.  You  can  view  documents  such  as  Microsoft  Office  files  in 
Internet  Explorer  without  launching  the  associated  program.  Site  visitors  must  use 
Internet  Explorer  3.x  or  later  to  view  content  created  with  ActiveX  controls.  To  view 
the  content  in  Netscape  Navigator  4.x,  site  visitors  must  install  special  plugins.  For 
information,  go  to  www.microsoft.com. 

To  insert  an  ActiveX  control: 

1.  In  Page  view,  select  the  ActiveX  Control  tool  from  the  Web  Applications  tools 
flyout  on  the  Advanced  toolbar. 

2.  Draw  a  box  to  indicate  the  position  of  the  ActiveX  control. 

The  Insert  ActiveX  Control  dialog  appears,  listing  the  ActiveX  controls  currently 
installed  on  your  system.  The  bottom  section  shows  the  selected  ActiveX 
control,  which  has  an  .ocx  or  .dll  extension. 


Insert  ActiveX  Control 


Acrobat  Control  for  ActiveX 


ActiveMovieControl  Object 
ActiveS  etup.  T  extCt I  0  bject 
ActiveXPIugin  Object 
adbanner  Class 

Blue  Sky  Software  WebPopupH  dp 

BPBox  Class 

BrowseFolder  Class 

B  rowseFolderPoouD  Class 


□3 


C:\Program  FilesSAdoheSAcrohat  40V^crohatVtetiveX\pdf.ocx 


[~  Set  codebase 


3.  Select  Set  codebase  to  add  the  codebase  parameter  to  the  generated  HTML  and 
ensure  that  the  ActiveX  control  is  published  to  the  Web  site.  If  a  visitor  who 
does  not  have  the  ActiveX  control  you  are  using  views  the  Web  site,  the  option 
to  download  the  control  is  offered. 

4.  Select  the  control  you  want  and  click  OK.  The  ActiveX  control  appears  on  your 
page,  and  the  ActiveX  Control  Properties  palette  appears. 
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ActiveX  Control  Properties 


33 


Acrobat  Control  for  ActiveX: 


Palette  options  vary 
depending  on  which 
ActiveX  Control  is 
selected 


The  General  tab  displays  the  options  for  the  selected  control. 


Note:  If  you  use  an  ActiveX  control  that  references  an  external  file,  such  as  a  .pdf 
file,  you  must  specify  the  relative  path  of  the  file  as  it  will  be  in  the  final 
published  site.  First  you  must  add  the  file  as  an  asset  of  the  site  and  set  it  to 
always  publish.  See  "Adding  a  File  Asset"  on  page  434.  To  determine  the  file's 
relative  path  in  the  final  site,  look  at  the  publish  directory  structure  listed  in 
Publish  view. 

5.  To  provide  text  that  the  browser  displays  if  it  cannot  launch  the  ActiveX  control, 
enter  the  text  in  the  AltTag  field. 

6.  To  change  an  option,  select  it  and  enter  the  information  in  the  field. 

♦  To  accept  any  text  you  enter,  click  the  check  mark  or  move  the  cursor  to 
another  field. 

♦  To  cancel  the  change,  click  the  X. 

♦  To  use  the  native  property  page  for  the  ActiveX  control,  click  the  Properties 
button.  You  can  change  the  control's  settings  using  the  native  property  page 
instead  of  NetObjects  Fusion  properties.  Some  ActiveX  controls  do  not  have 
a  native  property  page. 

♦  To  insert  HTML  tags  and  scripts,  click  the  HTML  button.  See  Chapter  27, 
"Working  with  HTML  Directly." 

You  can  add  actions  to  ActiveX  controls  using  the  Actions  tab. 
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Building  Dynamic  Pages 

You  can  include  animations  and  other  interesting  effects  in  your  site  by  adding 
actions  to  individual  objects  or  pages.  You  can  make  objects  move  on,  off,  and 
around  the  screen,  hide  or  show  them,  bump  them  with  other  objects,  have  them 
exchange  places,  and  so  on.  Site  visitors  can  drag  them  around  the  page.  You  can 
even  have  actions  respond  to  a  site  visitor's  entry  in  a  form.  No  programming  is 
required.  You  build  actions  by  simply  choosing  a  series  of  options  from  menus. 

When  you  use  actions,  note  that: 

♦  Due  to  limitations  of  Internet  Explorer  and  Netscape  Navigator,  actions  work 
only  in  versions  4.0  and  later  of  Internet  Explorer  and  version  4.x  of  Netscape 
Navigator.  Actions  are  not  supported  in  Netscape  Navigator  6.0. 

♦  You  can  use  actions  on  pages  with  AutoFrames;  do  not  use  actions  on  pages 
with  frames  that  were  scripted  by  adding  HTML  directly. 

♦  For  reliable  performance,  make  sure  you  select  Dynamic  Page  Layout — All 
Browsers  as  the  HTML  output  method  on  the  Layout  Properties  palette.  If  your 
site  visitors  use  only  version  4.0  and  later  browsers,  select  Fixed  Page  Layout. 
For  Layout  Regions  containing  objects  with  actions,  select  Regular  Tables. 

This  chapter  describes: 

♦  Adding  actions  to  pages,  objects,  and  text 

♦  Tailoring  actions  with  custom  messages 

♦  Targeting  several  objects  with  one  action 

♦  Modifying  actions 

♦  Scripting  your  own  actions 

♦  Scripting  parameter  values 

♦  Examples,  including  a  button  rollover,  collision  detection,  and  a 
slide  show 
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How  Actions  Work 

An  action  consists  of  a  trigger  event  that  causes  the  action  to  begin,  a  message  and 
various  parameters  specifying  what  the  action  does,  and  one  or  more  targets  that 
perform  the  action. 

♦  A  typical  trigger  event  can  be  a  mouse  click  or  simply  hovering  over  a  button 
(called  a  "mouse  over").  But  the  trigger  event  can  also  be  an  event  such  as  a  site 
visitor  entering  or  exiting  a  page.  In  that  case,  loading  the  page  might  trigger 
pictures  to  fly  across  the  page.  A  trigger  event  can  also  be  another  action,  so  one 
object  flying  off  the  page  could  make  another  object  fly  on. 

♦  The  action  message  might  be  to  show  or  hide  an  object,  make  an  object  fly  off 
the  page,  make  an  object  stick  to  the  pointer  so  the  site  visitor  can  drag  it  around 
the  page,  display  a  dialog  or  alert,  and  so  on. 

♦  The  target  can  be  one  or  more  objects  on  the  page,  the  page  itself,  or  a 
MasterBorder. 

You  add  an  action  to  the  object  that  triggers  it.  For  example,  suppose  you  want  to 
add  an  action  to  a  button  so  when  a  person  clicks  the  button  Picture  A  flies  off  the 
page.  The  action  you  add  to  the  button  has  the  trigger  event  "when  clicked,"  plus 
the  action  message  "fly  off  the  page,"  and  Picture  A  as  the  target. 

— -  © 

Clicking  a  button  that  Sends  a  "fly  off  the  page"  To  the  target  picture,  which 

has  an  action...  action  message...  flies  off  the  page 

To  sequence  actions,  you  can  trigger  one  with  another.  For  example,  suppose  that 
you  want  the  animation  to  continue  so  that  as  soon  as  the  first  action  makes  Picture 
A  fly  off  the  page,  the  second  action  makes  Picture  B  fly  on.  In  that  case  you  add  an 
action  to  Picture  A  with  the  trigger  event  "motion  ended,"  the  action  message  "fly 
onto  the  page,"  and  Picture  B  as  the  target. 

©   * 

After  a  picture  with  a  "motion  Itsendsa  "fly  onto  the  To  another  target  picture, 

ended"  action  flies  off  the  page...       page"  action  message...  which  flies  onto  the  page 

These  are,  of  course,  only  basic  examples  of  what  you  can  do  with  actions.  Many 
more  ideas  are  presented  throughout  this  chapter.  Additional  information  about 
using  actions  on  your  Web  pages  is  available  from  the  Workbench  link  at 
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www.netobjects.com/workbench.  The  links  from  the  Workbench  to  Actions  and 
JavaScript  walk  you  through  typical  solutions  for  building  dynamic  Web  pages. 

Adding  Actions  to  Objects  and  Pages 

You  can  add  an  action  to  any  object,  Layout,  or  MasterBorder.  NetObjects  Fusion 
comes  with  several  actions  you  can  apply  by  choosing  options  from  menus.  Just 
specify  a  trigger  event  to  start  the  action,  the  action  itself,  and  the  object  you  want  it 
to  target. 

You  can  add  any  number  of  actions  to  an  object.  For  example,  one  action  might 
cause  a  button  to  highlight  when  you  mouse  over  it,  while  another  action  removes 
the  highlighting  when  you  move  the  mouse  away. 


Note:  Because  MasterBorders  can  apply  to  several  pages,  any  object  in  the  Layout  that's 
targeted  by  an  action  involving  a  MasterBorder  must  be  available  in  all  Layouts  using 
that  MasterBorder. 


In  Page  view,  select  the  item  you  want  to  trigger  the  action,  and  click  the  Actions 
tab  on  the  Properties  palette. 


Picture  Properties 


j]^  o 
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Object  ID      ]  Picture  1 

Is?  Object  initially  visible  in  browser 

|0  Action  1  -  On  Page  Loaded  do  Set  Image 
|0  Action2  -  On  Mouse  Oyer  do  Use  Image 
|0Action3  -  On  Mouse  Out  do  Use  Image 


+  - 


Lists  all  actions  this  object  triggers. 
Actions  with  the  same  trigger  event 
occur  in  the  order  listed 

Adds  or  removes  an  action 
Changes  the  order  of  actions 


Clear  the  Object  initially  visible  in  browser  option  to  hide  the  object  when  the 
page  loads.  For  example,  if  an  action  targeting  this  object  makes  it  fly  onto  the 
page,  you  will  want  to  hide  the  object  until  the  fly  action  is  triggered. 

2.  Click  the  plus  (+)  button  on  the  Properties  palette  to  add  a  new  action. 
Add  action  button                 The  Set  Action  dialog  appears. 

3.  Specify  the  action's  trigger  event  in  the  When  field. 
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When  menu  button 


Click  the  When  menu  button  next  to  the  field,  point  to  a  trigger  category,  and 
click  the  trigger  event  you  want. 


Trigger  categories 


Target  picture? 
Message 
Parameter(s) 


r  Cascade  message 


A  I 


Some  of  the 
choices  available 
for  this  object 


The  trigger  events  available  depend  on  the  object  you're  adding  the  action  to. 
These  can  include: 

♦  Mouse.  Mouse  options  do  not  apply  in  some  cases,  including  text  objects, 
Layouts,  and  frames.  Mouse  options  are  for  triggering  an  action  when  the 
site  visitor  clicks  the  object,  mouses  down  or  up  (for  example,  you  might 
display  a  pushed-in  picture  of  a  button  on  mouse  down),  or  moves  the 
pointer  over  or  off  the  object. 

♦  Object  Triggers  the  action  when  the  object  is  either  hidden  or  shown  as  the 
result  of  another  action  that  targets  this  object. 

♦  Page.  Triggers  the  action  when  the  page  finishes  loading,  or  when  the  site 
visitor  opens  another  page. 

♦  Transition,  Motion,  Drag.  In  a  sequence  of  actions,  triggers  the  action  at  the 
start  or  end  of  another  action  that  targets  this  object.  For  example,  ending  a 
drag  might  trigger  another  action  to  restore  the  object  you  dragged  to  its 
original  position. 

♦  Custom.  These  are  messages  you  create  to  trigger  one  action  with  another  for 
specialized  action  sequences.  See  "Tailoring  Actions  with  Custom  Messages" 
on  page  322. 
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Target  menu  button 


4.  Make  sure  Standard  Action  is  displayed  in  the  action  type  drop-down  list.  For 
information  about  scripted  actions,  see  "Scripting  Your  Own  Actions"  on 
page  327. 

5.  Specify  the  object  your  action  is  to  target  in  the  Target  field. 

The  action  can  target  any  object  on  the  page,  the  Layout  itself,  or  even  the 
MasterBorder.  By  default,  it  targets  the  object  triggering  it.  To  target  another 
object,  click  the  Target  menu  button  next  to  the  Target  field  and  choose  an 
object  from  the  Object  Tree  palette.  If  you  add  a  "Fly  Out  to  Top  Right"  action 
to  one  picture  and  target  it  at  another,  for  example,  clicking  the  first  picture  can 
trigger  the  target  picture  to  fly  off  the  page. 


-U2<l 


Name:  |Action1 
When:    |  Hidden 


Standard  Action 


2J 
~3 


Target:  |Untitled1  Layout 
Message:  | 
Parameter(s):  | 


l~~  Cascade  message 


Untitled  1 
>E]  -[jp  DefaultMasterBorder 
'  Q  BuiltWithNOF 

— -  NavigationBar2 

E  NavigationEarl  > 
S33  Banner  1  / 


Untitled  1  Layout 


Expand  or  contract  levels  of  the  Tree  by 
clicking  the  plus  or  minus  sign  for  a  level 


Select  a 
target  from 
the  Object 
Tree  palette 


You  can  also  cascade  an  action  to  several  objects  at  once;  see  "Targeting  Several 
Objects  with  One  Action"  on  page  324. 


6.   Specify  the  action  you  want  to  occur  in  the  Message  field. 
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Message  menu  button 


Click  the  Message  menu  button  next  to  the  Message  field,  point  to  a  category, 
and  click  the  action  you  want. 


Name  |Action1 
When     |  Clicked 


Standard  Action 


Target  |Picture2~ 
Message  | 
Parameter(s) 


P  Cascade  message 


OK 


[HZ] 


'2J 


Cancel 


j      Object  ' 

I  / 

Transition 

^ 

Motion 

Fly 

Drag 

► 

Move  To 

Get  Property 

► 

Move  By 

Set  Property 

► 

Custom 

► 

Action  categories 

Some  of  the 
choices  available 
for  this  target 


Your  choices  for  actions  depend  on  the  object  you're  targeting.  These  can 
include: 

♦  Object.  Includes  options  for  hiding,  showing,  or  otherwise  arranging  the 
target  in  relation  to  other  objects;  adding  a  delay  between  the  trigger  event 
and  a  subsequent  action;  loading  different  images  to  use  for  a  picture,  say  to 
show  a  highlighted  button  when  a  site  visitor  mouses  over  it.  For  examples, 
see  "Creating  a  Button  Rollover"  on  page  330  and  "Sequencing  Actions  for  a 
Slide  Show"  on  page  335. 

♦  Transition,  Motion.  Redraws  the  object  in  any  of  several  ways,  or  causes  it  to 
move  in  some  way  across,  on,  or  off  the  page. 

♦  Drag.  Makes  an  object  stick  to  the  pointer  so  site  visitors  can  drag  it  around 
the  page.  One  action  might  make  the  object  stick  on  mouse  down,  while 
another  lets  the  object  go  on  mouse  up.  For  an  example,  see  "Colliding  One 
Object  with  Another"  on  page  332. 

♦  Get  Property,  Set  Property.  These  actions  are  typically  used  as  components  of 
scripted  actions  or  parameter  values,  in  particular  when  working  with  values 
entered  in  forms.  For  an  example,  see  "Customizing  Default  Actions"  on 
page  339. 


318 


Chapter  22    Building  Dynamic  Pages 


Parameter  menu  button 


♦  Location,  Dialog,  Window,  Browser.  These  options  appear  on  the  menu  if  the 
target  is  a  Layout  or  MasterBorder.  Use  these  options  to  open  another  URL 
after  an  animation  occurs,  display  a  dialog,  set  the  size,  position,  or  some 
other  state  of  the  window;  or  check  what  browser  the  site  visitor  is  using,  say 
to  trigger  a  different  set  of  actions  depending  on  the  browser  type. 

♦  Custom.  These  are  messages  you  create  to  trigger  one  action  with  another  in 
specialized  action  sequences.  See  "Tailoring  Actions  with  Custom  Messages" 
on  page  322. 

If  the  action  you  specify  requires  parameters  or  can  be  tailored  with  additional 
parameters,  specify  a  value  or  expression  in  the  Parameters  field. 

Click  the  Parameter  menu  button  next  to  the  Parameters  field  and  click  an 
available  option.  For  example,  for  a  Fly  message  you  can  choose  a  direction 
parameter  like  In  from  Top. 


Name  Actionl 


When  [Clicked 


|  Standard  Action 

Target  |Picture2 
Message  I 


Message  ply 
Parameters)  |ln  From  Top 


I     Lmczde  menage 


2i 


~3 


dl 
^1 

a 


In  From  Top 


In  From  Top  Right 


In  From  Right 
In  From  Bottom  Right 
In  From  Bottom 
In  From  Bottom  Left 
In  From  Left 
In  From  Top  Left 
Out  To  Top 
Out  To  Top  Right 
Out  To  Right 
Out  To  Bottom  Right 
Out  To  Bottom 
Out  To  Bottom  Left 
Out  To  Left 
Out  To  Top  Left 


Values...  — 
Expression... 


Primary  choices 
available  for  a  Fly 
message 


Opens  a  dialog  with 
all  default 
parameter  values 


For  some  actions,  you  can  click  Values  on  the  Parameters  menu  to  choose  from 
a  wider  selection  of  values. 
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The  Parameter  Values  dialog  appears,  listing  all  parameters  currently  available 
for  this  action  and  their  default  values. 


Parameter  Values 


Visibility  IS  how 

bur  ti  m  l  ei  or  I  10 

F      Injse  Mi 

C    e  I  ei  or  I 

Repeat  (times)  11 
Reverse  Direction      ! False 


Completion  M  essage 


Parameter  values  for  a  Fly 
message 


Select  a  parameter  to  edit  its 
value  in  the  text  field 


Whether  you  type  a  value 
directly  or  choose  it  from  a  list 
or  dialog  depends  on  the 
parameter 


To  modify  a  value,  select  a  parameter  and  edit  its  value  in  the  field  at  the  top  of 
the  dialog.  Depending  on  the  parameter,  you  might  type  the  value,  or  choose  it 
from  a  drop-down  list,  or  from  the  Color  Picker,  Picture  File  Open  dialog,  or 
Link  dialog.  Click  OK  when  you're  done  editing  parameters. 

You  can  also  write  your  own  JavaScript  expression  to  generate  a  parameter 
value.  See  "Scripting  Parameter  Values"  on  page  328. 

8.   Click  OK  in  the  Set  Action  dialog. 


Link  Tool 


Adding  an  Action  to  Linked  Text 

In  addition  to  adding  an  action  to  a  text  block,  you  can  also  add  an  action  to  linked 
text  by  creating  a  smart,  Blank  link  and  then  setting  the  text  to  have  an  action 
instead  of  linking  to  another  page.  A  text  link  can  be  a  trigger,  but  cannot  be  a 
target. 

1.  In  Page  view,  select  the  text. 

2.  From  the  Object  menu,  choose  Link,  or  click  the  Link  tool  on  the  Standard 
toolbar. 

The  Link  dialog  appears. 
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3.   Select  Smart  Link  as  the  link  type  and  select  the  Blank  link. 


Link 

am 

Link  type:     |smart  Link                        j^J          Find...      |      FindArjain  | 

Q  Smart  link: 

Name 

Description 

Home 

Links  to  your  Home  page. 

Up 

Links  to  the  parent  of  the  current  page. 

Next  Page 

Links  to  the  sibling  to  the  right  of  this  page  in  the  SiteStructure. 

Previous  Page 

Links  to  the  sibling  to  the  left  of  this  page  in  the  SiteStructure. 

First  Child  Page 

Links  to  the  first  child  page  of  the  current  page. 

Target:          None       C  Existing:      |  bod                             zl    ^  ^ew:  I 

HTML...  |                                                                                                         |     Link     |     Cancel  | 

4.  Click  the  Link  button. 

5.  Click  the  text  you  selected  earlier.  The  Text  Properties  palette  now  has  a  Link 
tab  indicating  a  link  is  defined  for  the  text. 

a  %  \m\o\ 

Custom  Style 

|7none>  Format...  | 

Name:  |Blank 
Type:  Structural 
URL:  |Blank 

Link...    |     Actions...  | 

Remove  Link 


6.  On  the  Text  Properties  palette,  click  the  Link  tab,  then  click  the  Actions  button. 
The  Actions  dialog  appears. 

7.  Click  the  plus  (+)  button  and  add  an  action  as  described  in  "Adding  Actions  to 
Objects  and  Pages"  on  page  315. 
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8.   Click  OK  in  the  Actions  dialog. 


Tailoring  Actions  with  Custom  Messages 


You  can  simplify  some  action  combinations  or  create  specialized  sequences  by 
triggering  actions  with  custom  messages.  A  custom  message  is  a  simple  text  string 
you  create  that  becomes  available  in  the  When  menu  as  a  trigger  and  in  the  Message 
menu  as  an  action.  You  can  then  send  it  as  a  wildcard  action  from  one  object  to 
trigger  whatever  action  is  added  to  another.  Some  actions  also  use  custom  messages 
as  parameter  values. 

Say  you  want  clicking  any  of  several  buttons  to  trigger  an  action  on  a  picture,  but 
you  want  to  periodically  change  the  action  from  Wipe  to  Iris.  Instead  of  having  to 
change  each  button's  action  message  from  Wipe  to  Iris,  you  can  have  each  button 
send  a  custom  message  that  triggers  a  Wipe  or  Iris  action  added  to  the  picture. 
Controlling  the  effect  of  each  button  then  requires  modifying  only  the  picture's 
action.  Several  uses  of  custom  messages  are  given  in  "Examples"  on  page  330. 

To  create  a  custom  message: 

1.  Select  the  object  you  want  to  trigger  the  first  action  in  a  sequence,  and  click  the 
plus  (+)  button  on  the  Actions  tab  of  the  Properties  palette. 

The  Set  Action  dialog  appears. 

2.  In  the  Set  Action  dialog,  open  the  When  or  Message  menu,  and  choose  Custom, 


Edit. 


The  Custom  Messages  dialog  appears. 


Adds  or  removes  a  message  from 
the  dialog  and  the  menus 


Lists  all  custom  messages  created 
for  this  site 


3.   Click  the  plus  (+)  button. 
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The  Add  Message  dialog  appears. 

Message 


OK  Cancel 


4.  Type  a  name  for  the  message  and  click  OK.  Do  not  use  spaces  or  punctuation  in 
message  names  to  avoid  causing  problems  when  you  publish. 

The  message  is  added  to  the  Custom  Messages  dialog.  You  can  remove  it  by 
selecting  it  in  the  dialog  and  clicking  the  minus  (-)  button. 

5.  Click  OK  in  the  Custom  Messages  dialog. 

6.  In  the  Set  Action  dialog,  create  an  action  that  sends  your  custom  message  to  the 
target. 

For  example,  to  make  clicking  the  source  object  trigger  an  action  added  to  a 
picture,  fill  out  the  Set  Action  dialog  like  this:  enter  Mouse,  Clicked  in  the  When 
field;  the  picture  object  in  the  Target  field;  and  your  custom  message,  which  is 
now  available  in  the  When  and  Message  menus,  in  the  Message  field. 


||      Custom  ► 

FlyAway 

ShowPicture 

Picturelsln 

DelaylsDone 

HideAII  Profiles 

Edit... 

7.  Click  OK  in  the  Set  Action  dialog  to  close  it. 

8.  Select  the  target  object,  click  the  plus  (+)  button  on  the  Properties  palette,  and 
add  the  action  you  want  the  custom  message  to  trigger. 

The  Set  Action  dialog  reappears.  Enter  your  custom  message  in  the  When  field, 
and  specify  a  target  and  action  in  the  remaining  fields. 

9.  Click  OK  in  the  Set  Action  dialog. 
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Targeting  Several  Objects  with  One  Action 

You  can  target  an  action  at  a  container  object — a  Layout,  MasterBorder,  Layout 
Region,  text  box,  or  table — to  apply  the  action  to  every  object  in  the  container.  For 
example,  clicking  a  button  could  hide  all  objects  in  a  Layout  Region.  Just  select  the 
Cascade  message  option  in  the  Set  Action  dialog  when  you  create  the  action. 

Cascading  messages  work  best  with  custom  messages.  See  "Showing  One  Object 
While  Hiding  Others"  on  page  333  for  an  example. 

1.   In  Page  view,  place  the  objects  you  want  to  target  in  a  Layout,  MasterBorder, 
Layout  Region,  text  box,  or  table. 


Note:  Actions  sent  to  a  Layout  or  MasterBorder  apply  to  the  entire  page,  not  just 
the  Layout  or  MasterBorder.  So  cascading  a  Hide  message  at  a  Layout  makes 
the  entire  page  go  blank.  To  hide  only  a  subset  of  objects  on  the  page,  put  the 
objects  in  a  Layout  Region  and  target  it  instead.  Also,  hiding  the  Layout  as  a 
Layout  Region  (or  in  any  container)  also  hides  its  contents  without  cascading. 

2.  Select  the  object  you  want  to  trigger  the  action,  and  click  the  plus  (+)  button  on 
the  Actions  tab  of  the  Properties  palette. 

The  Set  Action  dialog  appears. 

3.  Create  an  action  targeting  the  container  of  objects  you  want  the  action  to  apply 
to. 

When  filling  out  the  Set  Action  dialog,  enter  the  page,  Layout,  MasterBorder, 
Layout  Region,  text  box,  or  table  in  the  Target  field. 
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Target  a  container 


The  action  applies  to  objects 
in  the  order  listed  here   


Name:  |Action1 
When: — jMuuyy  Over- 


Standard  Action 


Target:  |l_ayoutRegion1 
Message:  | 
Parameter(s):  |~~ 


2i 


V  Cascade  message 


frl  DefaultMasterBorder 
H  BuiltWithNOF 
NavigationEarS 
NavigationBarl 
iannerl 
B"H  Unti\dl  Layout 

Q  Picture3 


^1 


4.   Click  OK  in  the  Set  Action  dialog. 

Triggering  the  source  object  targets  the  action  at  the  container  and  then  at  each  of 
its  objects  as  they're  listed  in  the  Object  Tree  palette. 

Keep  in  mind  that  the  container  responds  to  the  action  if  it  can.  If  the  container 
doesn't  know  how  to  respond,  it  is  possible  that  the  child  objects  might  know.  In 
this  case  you  can  cascade  the  action  so  the  child  objects  can  respond  appropriately. 
For  an  example  of  cascading  an  action,  see  "Showing  One  Object  While  Hiding 
Others"  on  page  333. 
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Modifying  Actions 


You  can  modify  an  object's  actions,  for  example,  to  change  a  trigger  event,  to 
reorder  actions  if  the  object  has  more  than  one,  to  disable  an  action,  or  to  delete  it 
altogether. 

In  Page  view,  select  the  object  whose  actions  you  want  to  modify,  and  click  the 
Actions  tab  on  the  Properties  palette. 


Picture  Properties 


a  N  o  | 


Object  ID      |  Picture? 

|^  Object  initially  visible  in  browser 


0  Action  1  -  On  Page  Loaded  do  Fly 
^  Action?  -  On  Mouse  Down  do  Bring  To  F 
ylAction3  -  On  Clicked  do  Wipe 


fcjbActi 


+  - 


The  object's  actions  are  listed  here 


An  unchecked  action  doesn't  get 
published  but  can  be  used  in  scripted 
actions  and  JavaScript  expressions 


Reorders  the  selected  action 


♦  To  change  the  sequence  of  actions,  select  an  action  and  click  the  up  or  down 
arrow  at  the  bottom  of  the  palette. 

If  two  or  more  actions  share  the  same  trigger  event,  they  occur  in  the  order 
listed. 

♦  If  you  don't  want  to  publish  an  action  now  but  might  want  to  later,  or  if  you 
want  an  action  available  only  to  use  in  a  scripted  action  or  JavaScript  expression, 
clear  that  action's  check  box.  Next  time  the  site  is  published,  this  action  is  not 
included,  but  it  is  still  available  to  insert  in  a  script  or  expression. 

♦  To  change  an  action's  properties — its  name,  trigger  event,  target,  action 
message,  and  so  on — double-click  the  action  and  make  changes  in  the  Set 
Action  dialog. 

♦  To  delete  an  action,  select  the  action  and  click  the  minus  (-)  button. 
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Scripting  Your  Own  Actions 


In  addition  to  the  actions  NetObjects  Fusion  provides  in  the  Message  menu, 
experienced  JavaScript  programmers  can  script  their  own  actions. 

1.  In  Page  view,  select  the  object  you  want  to  trigger  the  scripted  action,  and  click 
the  plus  (+)  button  on  the  Actions  tab  of  the  Properties  palette. 

The  Set  Action  dialog  appears. 

2.  Select  Scripted  Action  from  the  action  type  drop-down  list. 
A  text  box  appears  in  the  dialog. 


3.   Enter  your  scripted  action  in  the  text  box  using  JavaScript. 

NetObjects  Fusion  doesn't  verify  code  you  enter,  so  be  sure  to  use  valid  syntax. 
You  can  use  any  combination  of  typing,  inserting  existing  script  text  from  a  text 
file  (click  Insert  Script  and  open  the  file  from  the  File  Open  dialog),  or  inserting 
a  call  to  an  existing  action  or  function. 

To  insert  a  call  to  an  existing  action,  click  Insert  Action.  A  list  of  the  actions  you 
added  to  the  object  appears.  Select  an  action  to  insert  and  click  OK.  NetObjects 


Inserts  text  from  a  text  file 


Inserts  a  call  to  an  existing  action 
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Fusion  inserts  the  action  at  the  insertion  point  in  the  text  box,  in  the  form 
${ActionName). 


OK      I  Cancel 


Selecting  this  action  and 
clicking  OK... 


Name  Action2 


S(FlyOut) 

\ 

d 

Insert  Script...  |    Insert  Action... 

Cancel  | 


Inserts  the  action  call  $(FlyOut)  in  your  script 


4.   Click  OK  in  the  Set  Action  dialog. 


Note:  If  you're  scripting  an  action  and  need  to  define  JavaScript  functions  or  other 

parameters,  insert  the  defining  script  into  the  Between  Head  Tags  field  of  the  Layout 
HTML  or  Master  HTML  as  appropriate. 


Scripting  Parameter  Values 

You  can  customize  an  action's  parameter  values  instead  of  choosing  from  the  ones 
NetObjects  Fusion  provides  by  generating  them  with  a  JavaScript  expression.  For 
example,  you  might  use  the  value  a  site  visitor  types  in  a  form  object  as  the  number- 
of-seconds  value  in  a  Delay  action. 

If  you  know  JavaScript,  you  can  enter  expressions  directly.  You  can  also  modify 
code  for  the  default  values  NetObjects  Fusion  creates,  and  you  can  assemble 
expressions  out  of  an  object's  other  actions.  For  example,  an  expression  might  test 
for  a  particular  condition — like  time  of  day — and  then  trigger  actions  you  created 
with  the  Set  Actions  dialog  based  on  that  condition.  Just  as  the  Values  dialog  often 
lists  several  values,  an  expression  can  generate  one  or  more  values,  too. 

For  an  example  even  nonprogrammers  can  try,  see  "Customizing  Default  Actions" 
on  page  339. 
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1.  In  Page  view,  select  the  object  whose  parameter  values  you  want  to  script,  and 
add  any  actions  you  want  to  use  as  components  of  the  JavaScript  expression. 

For  these  actions,  ignore  the  When  field,  since  each  action  is  triggered  by  the 
expression.  Also,  if  an  action's  only  purpose  is  to  be  called  by  the  expression, 
disable  the  action  by  clearing  the  check  box  next  to  it  on  the  Actions  tab  of  the 
Properties  palette. 

2.  Create  the  action  whose  parameter  value  you  want  generated  by  the  expression, 
as  described  in  "Adding  Actions  to  Objects  and  Pages"  on  page  315.  Or,  open  an 
existing  action  by  double-clicking  it  on  the  Actions  tab  of  the  Properties  palette. 

3.  In  the  Set  Action  dialog,  open  the  Parameters  menu  and  choose  Expression. 

The  JavaScript  Expression  dialog  appears.  If  the  action  already  has  default 
parameter  values,  the  dialog  displays  the  code  for  those  values. 

4.  Enter  your  own  JavaScript  to  generate  the  parameter  value,  or  modify  the  code 
that's  already  there.  NetObjects  Fusion  doesn't  verify  code  you  enter,  so  be  sure 
to  use  valid  syntax. 


To  build  your  expression  around  existing  actions,  click  the  Insert  Action  button, 
select  an  action  from  the  Actions  dialog,  and  click  OK.  NetObjects  Fusion 
inserts  the  action  at  the  insertion  point,  in  the  form  ${ActionName). 

5.   Click  OK  in  the  JavaScript  Expression  dialog  and  again  in  the  Set  Action  dialog. 

When  the  action  is  triggered,  it  uses  the  parameter  values  generated  by  your 
expression. 


Enter  a  JavaScript  expression  here, 
replacing  or  modifying  existing  code 


Opens  a  list  of  actions  you  can  call 
from  the  expression 
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Creating  a  Button  Rollover 

You  can  use  the  Set  Image  and  Use  Image  actions  to  give  three-dimensional  feel  to  a 
button,  for  example,  by  highlighting  it  when  the  site  visitor's  pointer  passes  over  it, 
by  making  it  appear  pushed  in  when  pressed,  and  so  on. 

—  Highlighted  button 


^  Button's  look  when  the  page  loads 

For  this  example,  you  need  three  pictures  of  a  button — one  showing  how  it  looks 
when  the  page  loads,  one  showing  it  highlighted,  and  one  showing  it  pressed. 


Note:  This  example  applies  to  images  of  buttons,  but  not  to  form  buttons.  The  Set  Image 
action  is  not  available  for  form  buttons. 

1.  In  Page  view,  place  the  picture  of  the  button  as  it  looks  when  the  page  loads. 

2.  To  add  an  action  to  the  button,  click  the  Action  tab  on  the  Picture  Properties 
palette,  and  click  the  plus  (+)  button.  The  Set  Action  dialog  appears. 

3.  In  the  When  field,  from  the  Page  drop-down  menu  choose  Page  Loaded.  Click 
the  Target  Menu  button  next  to  the  Target  field  and,  from  the  Object  Tree 
dialog  that  appears,  select  the  button  object.  In  the  Message  field,  from  the 
Object  drop-down  menu  choose  Set  Image. 

4.  From  the  Parameters  drop-down  menu,  choose  Values. 
The  Parameters  dialog  appears. 
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5.   Identify  when  to  use  which  picture  file.  Make  sure  the  "loaded"  version  of  the 
button  is  selected  for  the  Image  1  (Normal)  value.  Then  select  the  highlighted 
button  for  Image  2  (Highlighted),  and  the  pressed  version  for  Image  3 
(Depressed). 


Parameter  Values 

|                                \o\   |  | 

Image  1  (Normal) 

C:\NetObjects  Fusion ' 

1  Image  2  (Highlighted) 

C:\NetObjects  Fusion ' 

1  Image  3  (Depressed) 

C:\NetObjects  Fusion  m 

Image  4  (Selected) 

1  Image  5 

1  Image  6 

1  Image  7 

|  Image  8 

Parameter  values  for  a  Set  Image  action 


6.  To  specify  a  picture  file  in  a  Set  Image  action's  Values  dialog,  select  a  value,  click 
the  button  next  to  the  edit  field,  and  open  a  file  from  the  Picture  File  Open 
dialog.  Click  OK. 

7.  Add  four  actions  to  the  button,  filling  out  the  Set  Action  dialog  for  each  action 
like  this: 

Action  1.  Enter  Mouse,  Mouse  Over  in  the  When  field;  the  button  itself  in  the 
Target  field;  and  Object,  Use  Image  in  the  Message  field.  Then  open  the 
Parameters  menu  and  click  Image  2  (Highlighted). 

/let/on  2.  Enter  Mouse,  Mouse  Out  in  the  When  field;  the  button  in  the  Target 
field;  Object,  Use  Image  in  the  Message  field;  and  Image  1  (Normal)  in  the 
Parameters  field. 

Action  3.  Enter  Mouse,  Mouse  Down  in  the  When  field;  the  button  in  the  Target 
field;  Object,  Use  Image  in  the  Message  field;  and  Image  3  (Depressed)  in  the 
Parameters  field. 

Action  4.  Enter  Mouse,  Mouse  Up  in  the  When  field;  the  button  in  the  Target 
field;  Object,  Use  Image  in  the  Message  field;  and  Image  2  (Highlighted)  in  the 
Parameters  field. 

To  link  the  rollover  button  to  another  page,  you  can  add  one  more  action.  In  the 
When  field,  from  the  mouse  drop-down  menu  choose  Clicked,  in  the  Target 
field  choose  layout,  in  the  Message  field  from  the  Location  menu  choose  Go  to 
URL,  and  in  the  Parameters  field  from  the  drop-down  menu  choose  Values  and 
select  the  link  to  go  to. 
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8.   Preview  the  page  to  test  your  rollover.  Mouse  over  the  button  to  see  it 
highlighted,  and  click  it  to  see  it  pushed  in. 

Colliding  One  Object  with  Another 

This  example  demonstrates  a  drag  action,  collision  detection,  and  custom  messages, 
where  dragging  one  object  into  another  makes  the  second  object  fly  off  the  page. 

1.  In  Page  view,  add  two  objects  to  the  page. 

2.  Make  sure  the  first  object  (the  one  you  plan  to  drag)  is  in  front  of  the  second 
object. 

3.  Make  a  note  of  each  object's  ID  as  it  appears  on  the  Action  tab  of  the  properties 
palette. 

4.  Select  the  first  object  and  create  a  custom  message  named  FlyAway,  as  described 
in  "Tailoring  Actions  with  Custom  Messages"  on  page  322.  Create  an  action  to 
use  in  creating  the  custom  message  and  then  delete  it. 


Custom  ► 

FlyAway 

Edit... 

Your  message  becomes  available  in  the 
When  and  Message  menus 


5.  Add  an  action  to  the  first  object  (as  described  in  "Adding  Actions  to  Objects  and 
Pages"  on  page  315)  so  that  mousing  down  on  it  makes  it  stick  to  the  pointer 
until  you  mouse  up. 

In  the  Set  Action  dialog,  enter  Mouse,  Mouse  Down  in  the  When  field;  the  first 
object  in  the  Target  field;  Drag,  Start  Drag  in  the  Message  field;  and  Until  Mouse 
Up  in  the  Parameters  field. 

6.  Add  a  collision  detection  action  to  the  first  object  like  this: 

In  the  Set  Action  dialog,  enter  Page,  Page  Loaded  in  the  When  field;  the  first 
object  in  the  Target  field;  and  Drag,  Set  Collision  Detection  in  the  Message  field. 
Then  open  the  Values  dialog  from  the  Parameters  menu  and  specify  the  second 
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object  for  the  Object  ID  value  (type  the  object's  ID  exactly  as  it  appears  on  the 
Actions  tab  of  its  properties  palette),  and  enter  FlyAway  for  the  Message  value. 


Parameter  Values 


I  FlyAway 


Object  ID 

When 

Type.... 


IRedBall 
idrop 

i  intersection 


]. 


Values  for  a  collision  detection  action 
ID  of  the  object  being  dragged 


Custom  message  sent  to  trigger  the 
other  object  to  fly  away 


When  the  first  object  is  dropped  over  the  second,  it  sends  the  FlyAway  message 
to  the  first  object. 

7.   Add  yet  another  action  to  the  first  object  that's  triggered  by  the  FlyAway 
message  and  tells  the  second  object  to  fly  off  the  page. 

In  the  Set  Action  dialog,  enter  Custom,  FlyAway  in  the  When  field;  the  second 
object  in  the  Target  field;  Motion,  Fly  in  the  Message  field;  and  Out  To  Top  in 
the  Parameters  field. 

Then  preview  the  page  to  test  your  collision.  Drag  the  first  object  over  the  second, 
drop  it  there,  and  watch  the  second  object  fly  off  the  page. 

Showing  One  Object  While  Hiding  Others 

Here's  an  example  of  cascading  a  custom  message  to  build  a  sequence  of  actions 
where  displaying  one  object  selectively  hides  others. 

Say  your  page  displays  a  map  showing  the  locations  of  five  company  offices.  For 
each  location,  a  button  superimposes  a  text  box  on  the  page  profiling  that  office's 
activities.  When  a  site  visitor  clicks  a  location,  you  want  to  hide  any  profile  that's 
currently  visible,  and  then  display  the  one  describing  the  selected  location. 

1 .   In  Page  view,  place  the  buttons  and  text  boxes  in  the  Layout  area,  arranging 
them  however  you  want. 
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2.   Select  one  of  the  buttons  and  create  a  custom  message  called  HideAllProfiles,  as 
described  in'Tailoring  Actions  with  Custom  Messages"  on  page  322. 


Custom 

0 

FlyAway 

Hide  All  Profiles 

Edit... 

Your  message  becomes  available  in  the 
When  and  Message  menus 


3.  To  each  button,  add  an  action,  as  described  in  "Adding  Actions  to  Objects  and 
Pages"  on  page  315,  so  clicking  the  button  cascades  the  HideAllProfiles  message 
to  the  Layout. 

In  the  Set  Action  dialog,  enter  Mouse,  Clicked  in  the  When  field;  the  Layout  in 
the  Target  field;  and  Custom,  HideAllProfiles  in  the  Message  field.  Also,  check 
the  Cascade  message  option. 

4.  Add  a  second  action  to  each  button  so  clicking  it  targets  a  Show  message  to  the 
text  box  associated  with  the  button. 

In  the  Set  Action  dialog,  enter  Mouse,  Clicked  in  the  When  field;  the  text  box 
this  button  should  display  in  the  Target  field;  and  Object,  Show  in  the  Message 
field. 

5.  Select  each  text  box,  and  on  the  Actions  tab  of  the  Properties  palette,  clear  the 
Object  initially  visible  in  browser  option. 


Clear  this  option  for  each  text  box  so  its 
contents  don't  appear  until  the  site 
visitor  clicks  the  appropriate  button 


6.  Add  an  action  to  each  text  box  that's  triggered  by  the  HideAllProfiles  message 
and  hides  the  text  box. 

In  the  Set  Action  dialog,  enter  Custom,  HideAllProfiles  in  the  When  field;  the 
text  box  itself  in  the  Target  field;  and  Object,  Hide  in  the  Message  field. 

Then  preview  the  page.  Clicking  a  button  should  send  HideAllProfiles  as  a 
cascading  action  message  to  the  Layout.  The  Layout  doesn't  have  any  actions 
triggered  by  this  message  so  it  doesn't  respond.  But  it  does  cascade  the  message 
down  to  its  embedded  objects.  As  a  result,  every  object  on  the  page  receives  the 
message.  But  only  those  objects  with  actions  triggered  by  the  message — the  text 
boxes — respond  by  hiding  themselves.  Next,  the  button  sends  a  Show  message  to  its 
associated  text  box,  which  makes  itself  visible. 
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Without  cascading  messages  you'd  have  to  add  four  additional  actions  to  each 
button — one  for  hiding  each  text  box.  If  you  didn't  use  a  custom  message  to  trigger 
the  text  boxes  to  hide,  cascading  a  Hide  message  to  the  Layout  would  hide  every 
object  on  the  page. 

Sequencing  Actions  for  a  Slide  Show 

Here's  an  example  of  using  custom  messages  and  a  delay  action  to  build  a  slide 
show.  When  the  page  loads,  a  slide  flies  onto  the  page,  stays  there  for  the  duration  of 
time  specified  by  a  delay,  flies  off,  and  is  followed  by  another  slide. 

Before  you  begin,  gather  the  pictures  you  want  to  show  in  each  slide  and  set  the 
HTML  output  to  Fixed  Page  Layout. 

1.  In  Page  view,  create  a  Layout  Region,  and  in  it,  place  pictures  and  text  for  your 
first  slide. 

By  creating  each  slide  in  a  Layout  Region,  you  can  include  multiple  objects  per 
slide. 

2.  Select  the  Layout  Region  and  clear  the  Object  initially  visible  in  browser  option 
on  the  Actions  tab  of  the  Properties  palette. 

You  clear  this  object  so  the  slide  doesn't  appear  until  an  action  triggers  it  to  fly 
onto  the  page. 

3.  Create  three  custom  messages  named  ShowPicture,  Picturelsln,  and 
DelaylsDone,  as  described  in"Tailoring  Actions  with  Custom  Messages"  on 
page  322. 

Your  messages  become  available 
under  Custom  in  the  When  and 
Message  menus 


Using  custom  messages  rather  than  a  generic  End  Motion  trigger  to  trigger  each 
slide's  entrance  and  exit  lets  you  control  exactly  which  motion  triggers  what. 

4.   Add  five  actions  to  the  Layout  Region,  as  described  in  "Adding  Actions  to 

Objects  and  Pages"  on  page  315.  For  each  action,  fill  out  the  Set  Action  dialog 
like  this: 

Action  7.  Enter  Page,  Page  Loaded  in  the  When  field;  the  Layout  Region  in  the 
Target  field;  and  Custom,  ShowPicture  in  the  Message  field. 


ShowPicture 
Picturelsln 
DelaylsDone 


Edit.. 
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Action  2.  Enter  Custom,  ShowPicture  in  the  When  field;  the  Layout  Region  in  the 
Target  field;  and  Motion,  Fly  in  the  Message  field.  Then  open  the  Values  dialog 
from  the  Parameters  menu,  enter  a  Direction  value  of  270  (degrees),  and  make 
sure  Visibility  is  set  to  Show,  which  tells  the  picture  to  fly  in  from  the  left.  Also 
enter  Picturelsln  as  the  Completion  Message. 


Parameter  Values 


3  DJ 


Direction  (degress:)  ;270 

Visibility  iShow 

Duration  (second/1 0)  |1 0 

E  ase  I  n  (second/1 0]  j  2 


Ease  Gut  (second/"IO);2 


Repeat  (times) 


Reverse  Direction 


!  False 


Completion  Message  picture  I  sin 
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Values  for  a  Fly  action 


These  two  settings  are  equivalent 
to  choosing  In  From  Left  from 
the  Parameters  menu 


When  the  Fly  action  is  complete, 
this  custom  message  is  sent  to 
the  target  to  trigger  the  next  action 


You  define  the  Fly  action's  parameters  in  the  Values  dialog,  instead  of  choosing 
In  From  Left  from  the  Parameters  menu,  so  you  can  trigger  the  next  action  with 
a  custom  message. 

Action  3.  Enter  Custom,  Picturelsln  in  the  When  field;  the  Layout  Region  in  the 
Target  field;  and  Object,  Delay  in  the  Message  field.  Then  open  the  Values 
dialog  from  the  Parameters  menu  and  enter  DelaylsDone  as  the  Custom 
Message,  and  2  for  the  Delay  value. 


1  Parameter  Values 

|  DelaylsDone 

zi  JJ 

[Custom  Message 

fDelaylsDone 

1  Delay  (seconds) 

Loop 

Values  for  a  Delay  action 

The  message  sent  to  the  target  to  trigger 
the  next  action,  after  this  delay 


The  duration  of  the  delay,  in  seconds 


The  arrival  of  the  first  slide  triggers  a  two-second  delay  after  which  the 
DelaylsDone  custom  message  is  sent  to  trigger  the  next  two  actions. 

Action  4.  Enter  Custom,  DelaylsDone  in  the  When  field;  the  Layout  Region  in 
the  Target  field;  Motion,  Fly  in  the  Message  field;  and  Out  To  Right  in  the 
Parameters  field. 


After  two  seconds,  the  slide  flies  off  the  page. 
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Action  5.  Enter  Custom,  DelaylsDone  in  the  When  field;  the  Layout  Region  in 
the  Target  field  (you  change  this  later);  and  Custom,  ShowPicture  in  the 
Message  field. 

Also  after  two  seconds,  another  slide  flies  onto  the  page. 

5.   Create  the  second  slide  by  copying  and  pasting  the  entire  Layout  Region,  and 
placing  the  copy  directly  on  top  of  (not  inside)  the  first  Region. 

Copying  the  Layout  Region  copies  its  actions,  too,  so  you  don't  have  to  add  the 
same  actions  over  and  over  to  subsequent  slides. 

To  stack  Layout  Regions  without  inserting  one  in  the  other,  select  the  Regions 
and  align  them  using  the  Align  buttons  on  the  Multi-Object  Properties  Palette. 


Multi-Object  Properties  BEE] 


Horizontally 
Left 

Center 

Right 

Top 

13 

Center 

i2j 

Bottom 

Distribute 

Horizontally  (r}1 

Vertically 


I     Relative  to  Layout 


6.  Select  the  new  Layout  Region,  replace  its  contents  with  the  contents  for  your 
second  slide,  and  delete  its  first  action  from  the  Actions  tab  on  the  Properties 
palette. 

To  make  sure  you're  working  with  the  second  Layout  Region's  actions,  open  the 
Object  Tree  palette  (from  the  View  menu  choose  Palettes,  Object  Tree),  and 
select  the  Region. 

7.  Copy  and  paste  the  second  Layout  Region  once  for  each  remaining  slide.  Align 
the  resulting  Regions  on  top  of  each  other  as  you  did  in  step  5.  While  working 
with  each  Layout  Region,  replace  its  contents  with  those  for  a  new  slide. 

You  can  uncover  a  Layout  Region  to  work  on  in  Page  view  by  selecting  Regions 
in  the  Object  Tree  palette  and  using  the  Hide  Object  or  Show  Object  command 
on  the  Object  menu.  Also  in  the  Object  Tree  palette,  you  can  rename  Regions 
Slide  1,  Slide2,  and  so  on  to  keep  track  of  which  slide  is  which. 
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8.   Edit  the  last  action  of  all  but  the  last  slide  so  it  targets  the  next  slide  in  the  show. 

Double-click  the  action  on  the  Actions  tab  of  the  Properties  palette  to  open  the 
Set  Action  dialog  and  change  the  target. 


<™  -  °" Dela!    When  |DelaylsDone 
|  Standard  Action 


AotionS  -  On  Dela 


+  - 


larget  |Slide3 


Message  |ShowPicture 
Pararneter(s)  j 


I~~  Cascade  message 


4 


Double-click  the  last 
action  of  Slide  2... 


to  open  the  Set  Action 
dialog... 


and  edit  the  action  to 
target  the  Show  Picture 
action  at  Slide  3 


9.   For  the  last  slide,  deactivate  all  but  the  first  action  by  clearing  the  box  to  the  left 
of  the  action. 


Layout  Properties 


I  Slide:]: 


Object  ID 
]     Object  initially  visible  in  browser 
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0  Action2  -  On  ShowPicture  do  Fly 
Action3  -  On  Picturelsln  do  Delay 
Action4  -  On  DelaylsDone  do  Fly 


|  ActionS  ■  On  DelaylsDone  do  ShowPicd 


L 


v_ 


The  last  slide's  actions 


Clear  the  box  next  to  each 
action  that  doesn't  apply  to  the 
last  slide,  so  the  actions  aren't 
published 


By  deactivating  rather  than  deleting  actions  that  target  another  currently 
nonexistent  slide,  you  can  easily  add  slides  to  your  show  later  by  reactivating 
and  targeting  the  actions  at  a  new  slide. 
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Make  sure  Fixed  Page  Layout  is  selected  as  the  HTML  output  method  on  the  Layout 
Properties  palette  and  that  Word  wrap  is  cleared  in  the  HTML  Options  dialog  you 
access  from  the  Site  Settings  General  tab.  Then  preview  the  page  to  test  your  slide 
show. 

Loading  the  page  sends  a  ShowPicture  action  to  the  first  slide,  triggering  it  to  fly 
onto  the  page.  The  completion  of  the  Fly  action  sends  a  message  that  triggers  a  two- 
second  delay,  after  which  another  custom  message  triggers  both  the  exit  of  the 
current  slide  and  the  entrance  of  the  next. 

Customizing  Default  Actions 

The  trigger  events,  action  messages,  and  default  parameter  values  available  in  the 
Set  Action  dialog  are  defined  in  the  JavaScript  Beans  (jsb)  and  JavaScript  (.js)  files 
in  the  NetObjects  Fusion  7\NetObjects  System  folder.  If  you're  experienced  in 
JavaScript  programming,  you  can  add  your  own  .jsb  and  .js  files  to  provide  even 
more  choices  in  the  Set  Action  dialog. 
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Referencing  and  Editing 
External  HTML 

In  addition  to  content  you  create  and  maintain  in  Page  view,  your  site  might  also 
include  pages  that  require  special,  hand-coded  HTML.  Instead  of  importing  and 
converting  this  HTML,  you  can  reference  HTML  files  externally  and  place  them 
anywhere  in  your  site. 

You  can  manage  the  external  assets  for  your  referenced  file  in  Assets  view.  Also, 
apply  a  consistent  look  to  the  published  pages  of  referenced  files  by  assigning  a 
MasterBorder.  You  can  edit  referenced  files  in  HTML  Source  view  or  in  an  external 
HTML  editor  such  as  Notepad  or  Macromedia  HomeSite.  To  specify  a  default 
external  HTML  editor,  see  "Setting  Program  Options"  on  page  20. 


Note:  You  can  reference  files  located  on  a  hard  disk  or  LAN,  but  not  from  a  remote  Web 

server.  Also,  <  A  HREF>  links  in  the  original  HTML  files  should  point  to  other  HTML  files 
and  anchors  within  those  files  using  relative  rather  than  absolute  path  names.  See 
"Managing  Referenced  Assets"  on  page  349  for  information. 

This  chapter  describes  how  to  work  with  external  HTML  by: 

♦  Referencing  HTML  from  Site  view.  Page  view,  or  as  an  object 

♦  Toggling  referenced  layouts  and  objects 

♦  Managing  referenced  assets 

♦  Publishing  native  HTML 

♦  Previewing  and  publishing  unmanaged  assets 
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Using  Referenced  Files 

By  referencing  an  external  file  instead  of  importing  it,  you  can  keep  the  original  file 
intact  and  maintain  it  outside  of  NetObjects  Fusion.  When  you  import  a  file  instead 
of  referencing  it,  the  file  becomes  a  page  in  the  site,  and  is  maintained  within 
NetObjects  Fusion. 

Referenced  files  become  another  page  in  your  site  but  are  maintained  separately 
unless  you  convert  them  to  NetObjects  Fusion.  Imported  files  can  be  either  HTML 
pages  created  by  someone  else  or  document  files  that  you  want  to  add  as  text  boxes 
on  your  page.  Once  you  import  a  file,  you  maintain  it  in  your  site  like  any  other 
page. 

You  can  add  an  external  HTML  file  as: 

♦  A  page  that  appears  exactly  as  it  appears  in  its  original  file. 

♦  A  page  that  appears  with  your  default  MasterBorder. 

♦  An  individual  object  on  a  page. 

See  "Referencing  HTML  from  Site  View"  on  page  342  and  "Referencing  HTML  as 
an  Object"  on  page  346. 

When  you  reference  an  HTML  file,  NetObjects  Fusion  copies  all  of  its  data  to  a  new 
HTML  file  before  it  is  published.  The  original  HTML  file  remains  on  your  local 
machine;  it  is  not  uploaded  to  the  server  when  you  transfer  the  site.  Because  of  this, 
you  cannot  dynamically  update  the  original  file  by  uploading  a  new  referenced  file 
to  the  server. 

Referencing  HTML  from  Site  View 

You  can  reference  an  entire  site  or  section  of  a  site  from  Site  view.  For  example,  you 
might  reference  an  existing  site  you  want  to  manage  with  NetObjects  Fusion  now 
and  convert  later.  Or,  you  can  reference  files  you  prefer  to  maintain  in  their  native 
code. 


Note:  For  links  to  work  between  the  HTML  files  you  reference,  use  relative  path  names  in  the 
original  <A  HREF>  tags,  keep  all  HTML  files  in  the  same  directory,  and  publish  files 
using  the  same  directory  structure  as  the  original  site.  See  "Managing  Referenced 
Assets"  on  page  349  for  information. 
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When  you  reference  HTML  from  Site  view,  NetObjects  Fusion  publishes  the 
<HEAD>  content  from  the  original  files,  along  with  <HEAD>  content  it  generates. 

1.  In  Site  view,  select  the  page  to  be  the  parent  of  the  pages  you  reference. 

2.  From  the  File  menu,  choose  Reference  External  HTML. 


Select  an  existing  page  and 
choose  the  Reference 
External  HTML  command 


NetObjects  Fusion  adds  the  top  level 
page  you're  referencing  here,  and  its 
children  below 


I 

The  Reference  External  HTML  dialog  appears. 

3.  Click  Browse. 

The  Open  dialog  appears. 

4.  Select  the  top-level  HTML  file  you  want  to  reference,  and  click  Open  to  return 


to  the  Reference  External  HTML  dialog. 


Reference  External  HTML 


_Ux| 


Homepage:  | C:\NetObjects  Fusion  7\Tutor1ai\HTML  Browse...  | 
Options 


Assign  MasterBorder:  |ZeroMargins 

|~  Limit  number  of  paJpefaultMasterB  order 
Calendar 


~3- 


V  Down  to  structural  level   |^u 

J-  Do  not  manage  or  move  assets 


NetObjects  Fusion  references 
'this  file  and  its  child  files 


Display  referenced  HTML  on 
pages  with  your  site's 
MasterBorder,  or  choose 
ZeroMargins  to  publish  external 
content  with  its  original  look 


♦  Assign  MasterBorder.  Choose  a  MasterBorder  from  this  drop-down  list.  Each 
HTML  file  you  reference  occupies  the  Layout  area  of  a  page,  while  the 
MasterBorder  gives  pages  the  consistent  look  of  your  site.  To  display 
external  content  with  its  original  look,  choose  ZeroMargins.  If  the  HTML 
contains  frames,  you  must  choose  the  ZeroMargins  MasterBorder. 
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♦  Limit  number  of  pages  to.  Select  this  option  to  enter  the  number  of  files  to 
reference.  NetObjects  Fusion  begins  with  the  Home  page  you  select  and 
stops  referencing  when  it  reaches  the  end  of  the  site  or  the  number  of  pages 
entered  here. 


Note:  NetObjects  Fusion  only  follows  <A  HREF>  links;  it  cannot  follow  links  in 
JavaScript  or  cgi  scripts. 

♦  Down  to  structural  level.  Select  this  option  to  enter  how  many  levels  of  your 
SiteStructure  to  reference.  NetObjects  Fusion  references  as  many  pages  as 
possible  at  a  higher  level  before  going  to  a  lower  level. 

♦  Do  not  manage  or  move  assets.  If  you  select  this  option,  NetObjects  Fusion 
doesn't  copy  external  assets  into  Assets  view.  Do  this  if  you  prefer  that  path 
names  in  the  published  HTML  not  be  edited  from  your  native  code. 
However,  you  then  have  to  manage  images  and  other  assets  yourself.  See 
"Publishing  Unmanaged  Assets"  on  page  351. 

5.   Click  OK. 

The  referenced  files  appear  in  Site  view,  where  you  can  rename  them  just  like  other 
pages.  To  keep  track  of  externally  referenced  pages,  you  can  color  code  the  page 
icons  in  Site  view.  See  "Setting  Site  Management  Properties"  on  page  36. 

From  Site  view,  going  to  Page  view  displays  the  external  file  in  HTML  Source  view, 
where  you  can  edit  its  HTML  code. 

Referencing  HTML  from  Page  View 

You  can  reference  an  external  HTML  file  as  the  Layout  area  of  a  page  from  Page 
view,  and  incorporate  the  file's  <HEAD>  content — for  example,  to  include  existing 
META  tag  keywords  or  JavaScript  definitions. 

1 .  Create  a  page  in  Site  view. 

2.  In  Page  view,  from  the  File  menu,  choose  Reference  External  HTML  Page. 
The  Reference  External  HTML  Page  dialog  appears. 

3.  Click  Browse. 

The  Open  dialog  appears. 
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4.   Select  the  external  file  you  want  to  reference,  and  click  Open  to  return  to  the 
Reference  External  HTML  Page  dialog. 

If  the  file  is  already  referenced  elsewhere  in  the  site,  avoid  creating  a  duplicate 
asset  by  clicking  the  HTML  Assets  tab  and  selecting  the  file  from  there. 


Folder    HTML  Asset 


Look  in:  |  'Pd  NetObjects  Fusion  7 


ZD  Components 


_J  Styles 
C]  Templates 
Q]  Tutorial 
I  NetObjects  System   _J  User  Sites 


2}  FSIUpdater 
^"1  Java 


Open  a  file  from  this  tab  to  add  a 
new  asset  to  the  site 

Open  a  file  from  this  tab  to  reuse 
an  existing  asset 


5.   Choose  whether  to  import  the  referenced  file's  <HEAD>  content  and  manage 
external  assets. 


Reference  External  HTML  Page 


_?jx| 


W  Import  {HEAD >:     | Append  to  Current  <HEAD^^ 


I-  Do  not  manage  or  move  assets 


NetObjects  Fusion  places  this 
file's  <BODY>  in  the  Layout  area 
of  your  new  page 

Check  here  to  also  publish  the 
file's  <HEAD>  content... 

...either  in  addition  to,  or  instead 
of,  the  <HEAD>  NetObjects 
Fusion  generates 


♦  Import  <HEAD>.  Select  this  option  to  publish  the  external  HTML  page's 
<HEAD>  content.  Choose  Append  to  Current  <HEAD>  to  add  external 
<HEAD>  content  to  what  NetObjects  Fusion  generates,  or  choose  Replace 
Current  <HEAD>  to  publish  only  the  external  page's  <HEAE»  content. 
Note  that  this  setting  is  not  persistent  (that  is,  it  is  not  retained  by 
NetObjects  Fusion  between  sessions),  so  you  must  choose  this  option  for 
each  referenced  page. 


Caution:  Don't  select  Replace  Current  <HEAD>  if  the  page  contains  actions, 
navigation  bars  with  rollover  buttons,  or  is  being  published  using  the 
Fixed  Page  Layout  output  option.  NetObjects  Fusion  generates  <HEAD> 
content  these  options  require. 
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♦  Do  not  manage  or  move  assets.  If  you  select  this  option,  NetObjects  Fusion 
doesn't  copy  any  external  assets  into  Assets  view.  Do  this  if  you  prefer  that 
path  names  in  the  published  HTML  not  be  edited  from  your  native  code. 
However,  you  then  have  to  manage  images  and  other  assets  yourself.  See 
"Publishing  Unmanaged  Assets"  on  page  351. 

6.   Click  OK. 

In  Page  view,  a  placeholder  for  the  referenced  HTML  fills  the  Layout  area. 


Wonder  Lodge.htm 
Last  Modified:  5/16/2002  3:33:40  PM 
File  Size:  3.07KB  [3147  bytes| 


+  Double-click  1o  edit  this  HTML  file  • 


[Homel  FMi 

:V(-.         'Me.:       .  ,;    K  :0;  iBSt 

Wor  . . :  L>  k:  ■; 

Information  about  the 
referenced  file 


Double-click  the  referenced  Layout  area  to  edit  the  referenced  file  in  HTML  Source 
view.  To  edit  the  file  in  an  external  editor,  right-click  and  choose  Open  File  In 
External  Editor  from  the  shortcut  menu.  To  specify  a  default  external  HTML  editor, 
see  "Setting  Program  Options"  on  page  20. 

Referencing  HTML  as  an  Object 

You  can  reference  an  external  file  as  an  individual  object  on  a  page.  For  example, 
you  can  reference  an  ad  banner,  an  applet  created  by  a  Java  generator,  or  any  other 
object  requiring  special  code. 

You  can  even  reference  several  external  files  on  a  page.  For  example,  you  might 
construct  a  front  page  for  a  company  newsletter  that  includes  a  slot  for  each  of 
several  externally  maintained  story  leads. 
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As  when  you  reference  HTML  as  a  Layout  area,  you  can  incorporate  each  file's 
<HEAD>  tags  and  script  definitions  to  include  existing  META  tag  and  script 
definitions. 


IS 


External  HTML  tool 


To  reference  HTML  as  an  object: 

1.  In  Page  view,  choose  the  External  HTML  tool  from  the  Advanced  toolbar. 

2.  Draw  a  box  where  you  want  the  referenced  content  to  appear. 

Put  the  box  in  the  Layout  area  to  publish  the  content  on  one  page,  or  in  the 
MasterBorder  to  publish  it  in  the  border  of  several  pages. 

The  Reference  External  HTML  Page  dialog  appears. 

3.  Click  Browse,  select  the  external  file  you  want  to  reference,  and  choose  whether 
to  import  the  file's  <HEAD>  content  and  manage  external  assets,  as  described 
in  "Referencing  HTML  from  Page  View"  on  page  344. 


Reference  External  HTML  Pa 


_?jx| 


Page:   |  C:\NetObjects  Fusion  7\TutorialM-ITMLAContest.  |  Browse.T"| 


Opticus  

W  Import  <HEAD>:     I Append  to  Current  <HEAD>  ~z\ 


|~  Do  not  manage  or  move  assets 


J. 


This  file's  <BODY>  is  published 
■  in  the  HTML  table  cell  generated 
for  the  object 

•  Check  here  to  also  publish  the 
file's  <HEAD>  content... 

'  ...either  in  addition  to,  or  instead 
of,  the  <HEAD>  NetObjects 
Fusion  generates 


4.   Click  OK. 

A  placeholder  for  the  referenced  HTML  file  fills  the  box.  Preview  the  page  to  see  the 
object.  If  necessary,  go  back  and  adjust  the  box's  position  in  Page  view  to  get  the 
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spacing  you  want.  As  with  other  objects,  you  can  drag  a  referenced  object  around 
the  page,  drag  it  inside  other  objects,  or  even  layer  it. 


Letter  1 
by  Author  1 

Letten2  I  - 

by  .Author  2 


Would  you  like  our 
publication  to  be 
delivered  to  your 
lotne  or  office? 
Subscribe  today! 


Ad_Banner.html 


Feature  Articles 


Sea>SlBie4-&y  Author  1 


■.<>'.'  a  brief  descripri  a  lecte  ti  Lorem 

asum  dolor  sit  amet,  consectetaur  adipising  eHt,  sed  do 
i  i  !  '  I  i  i 

Hearing  2  by  Author  2 


Provide  a  brief  pescjipti&tl  of  selected  article.;  Lc^em; 
asurn  dolor  sit  amet,  consectetaur  adipising  elit,  sed  do 
mismod  temp  or  iricididunt  lit  labore  er  dolor: 


Referenced  object 

Add  other  referenced  objects 
as  well  as  pictures,  media,  and 
objects  created  in  NetObjects 
Fusion 


Double-click  the  referenced  HTML  placeholder  to  edit  the  referenced  file  in  HTML 
Source  view.  To  edit  the  file  in  an  external  editor,  right-click  and  choose  Open  File 
In  External  Editor  from  the  shortcut  menu.  To  specify  a  default  external  HTML 
editor,  see  "Setting  Program  Options"  on  page  20 


Toggling  Referenced  Layouts  and  Objects 

You  can  resize  a  referenced  HTML  file  so  it  becomes  an  object  in  the  Layout  instead 
of  taking  up  the  entire  Layout  area.  You  can  do  this  to  make  room  for  other  objects 
in  the  Layout  area.  Conversely,  you  might  want  to  size  a  referenced  object  to  fill  the 
entire  Layout  area.  You  can  also  import  the  referenced  object  into  NetObjects 
Fusion. 


n|o| 

File:  |  C:\NetObjects  Fusion  7\TutoriaKH 
Browse...  | 


[7  I 


uonvert  to  Fusion 


Edit  HTML  File 


•  Adds  or  removes  resize  handles 
from  referenced  HTML 

Imports  the  object  into  NetObjects  Fusion 

Displays  the  source  code  in  HTML  Source 
view 


1.   In  Page  view,  click  in  the  referenced  Layout  area  or  object  you  want  to  resize. 
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2.   On  the  General  tab  of  the  External  HTML  Properties  palette: 

♦  Select  Size  to  layout  to  remove  resize  handles  from  an  object,  which  fills  the 
Layout.  You  can  then  use  the  Convert  to  Fusion  button  to  import  the 
referenced  object  into  NetObjects  Fusion. 


Note:  Avoid  sizing  a  referenced  object  to  a  Layout  if  there  are  other  objects  in  the 
Layout  area.  You  might  get  unexpected  results  in  some  browsers. 

♦  Clear  Size  to  layout  to  add  resize  handles  to  a  referenced  Layout  area,  so  you 
can  resize  it,  move  it,  and  add  other  objects. 

♦  Click  Edit  HTML  File  to  edit  the  referenced  file  on  the  HTML  Source  tab. 

Managing  Referenced  Assets 

When  you  reference  an  external  HTML  file,  NetObjects  Fusion  lists  the  HTML  file 
in  Assets  view.  Unless  you  choose  otherwise,  it  imports  into  Assets  view  pictures, 
applets,  media,  and  most  other  external  assets  the  file  references. 

You  can  move  external  assets  in  your  directory  structure  in  Publish  view  while 
maintaining  paths.  When  you  publish,  NetObjects  Fusion  edits  paths  to  the  assets 
so  they  can  be  found.  For  example,  depending  on  your  original  and  published 
directory  structures,  NetObjects  Fusion  might  change  the  original  HTML's  <IMG 
SRC="lmages/Logo.gif">  to  <IMG  SRC="../lndex/Logo.gif">  in  the  published  HTML. 

However,  NetObjects  Fusion  doesn't  edit  paths  to  other  HTML  files,  or  to  target 
anchors  within  <A  HREF>  tags.  For  these  links  to  be  maintained,  the  path  names  in 
the  original  files  must  work  as-is  when  you  publish.  The  original  <A  HREF>  tags 
should  use  relative  rather  than  absolute  path  names,  for  example,  use 
<A  HREF="lndex.html">  rather  than  <A  HREP="HTTP://www.your_original_domain.com/ 
lndex.html">.  You  must  position  external  HTML  files  in  your  NetObjects  Fusion 
directory  structure  so  the  original  paths  work.  See  "Customizing  Your  Site's 
Directory  Structure"  on  page  470. 

NetObjects  Fusion  manages  external  assets  referenced  by  these  tags: 

♦  <IMGSRC=> 

♦  <A  HREF=>  to  non-HTML  assets,  such  as  sound  files 

♦  <BODY  BACKGROUND=> 

♦  <EMBED  SRC=> 

♦  <BGSOUND  SRC=> 
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♦  <SCRIPTSRC=> 

♦  <INPUTSRC=> 

♦  <APPLET  CODE=> 

Although  NetObjects  Fusion  manages  external  applets  that  are  assets  of  referenced 
HTML,  it  might  not  manage  certain  classes  referenced  by  the  applets.  Look  in 
Assets  view  to  see  if  any  classes  you  reference  aren't  listed.  Then  see  "Publishing 
Unmanaged  Assets"  on  page  351  for  information  on  getting  these  classes  and  other 
unmanaged  assets  to  the  \Preview  folder  or  Web  server. 

Once  an  external  asset  is  imported  into  Assets  view,  you  can  use  it  anywhere 
throughout  your  site.  Deleting  referenced  HTML  from  your  site  removes  its  assets 
from  Assets  view  unless  they're  in  use  elsewhere. 


Publishing  Native  HTML 


When  you  preview  or  publish  referenced  HTML,  NetObjects  Fusion  copies  the 
HTML  from  the  original  files  to  a  location  in  the  publish  folder.  Note  that  some 
links  may  not  work  in  Preview.  If  managing  external  assets  or  including 
MasterBorders,  NetObjects  Fusion  also  adds  its  own  code  to  the  published  HTML. 
Of  course  it  never  modifies  your  original  files. 

If  you  don't  want  HTML  added  to  the  original  code  when  the  site  is  published,  you 
can  choose  these  options  in  the  Reference  External  HTML  and  Reference  External 
HTML  Page  dialogs. 


Homepage:  | C:\NetObjects  Fusion  7\Tutorial\HTML  |  Browse...  | 
Options 


Assign  MasterB  order:  |  ZeroMargins 


3- 


When  you  reference  HTML 
from  Site  view,  choose  the 
ZeroMargins  MasterBorder 


Reference  External  HTML  Page 


J?!*] 


Page:   | C:\NetObjects  Fusion  7\Tutorial\HTML\Contest.     Browse...  | 


■Options  

F  Import  <HEAD>:  |  Replace  Current  < HEAD >  ^\ 
W  Do  not  manage  or  move  assets   


1 


When  you  reference  HTML 
from  Page  view,  choose 
Replace  current  <HEAD> 

In  either  case,  select  this 
option 
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♦  When  you  reference  from  Site  view,  choose  the  ZeroMargins  MasterBorder. 
NetObjects  Fusion  doesn't  add  MasterBorder  information  to  the  published 
HTML  or  impose  a  table  structure. 

♦  When  you  reference  from  Page  view,  choose  Replace  Current  <HEAD>  from 
the  Import  <HEAD>  drop-down  list.  NetObjects  Fusion  publishes  the  original 
<HEAD>  as-is,  without  adding  HTML  of  its  own. 

Don't  do  this  if  you're  using  actions  or  navigation  bars  with  rollover  buttons  on 
the  page,  or  publishing  using  the  Fixed  Page  Layout  output  option. 

♦  In  either  case,  select  Do  not  manage  or  move  assets.  NetObjects  Fusion  doesn't 
copy  external  assets  into  Assets  view,  so  it  doesn't  edit  path  names  in  the 
published  HTML.  However,  this  means  you  have  to  publish  images  and  other 
assets  yourself.  See  "Publishing  Unmanaged  Assets"  on  page  351. 

♦  Be  sure  Size  to  layout  is  selected  on  the  External  HTML  Properties  palette  in 
Page  view. 

Publishing  Unmanaged  Assets 

If  you  choose  not  to  manage  assets  when  you  reference  external  HTML  files,  you 
have  to  get  external  pictures,  media  files,  applets,  and  other  assets  to  the  Web  server 
yourself. 

You  can  upload  the  files  to  the  server  from  wherever  they  reside  using  an  FTP 
utility.  Or,  use  the  New  File  Asset  command  to  copy  assets  into  Assets  view  so  they 
are  published  with  the  rest  of  the  site. 

1.  In  Assets  view,  from  the  Assets  menu,  choose  New  File  Asset. 
The  File  dialog  appears. 

2.  Click  Browse  in  the  dialog  to  open  an  external  asset  you  want  to  publish,  and 
type  a  name  for  the  asset.  See  "Adding  a  File  Asset"  on  page  434. 

3.  Select  Always  publish  file  and  click  OK. 

This  causes  the  file  to  be  published,  even  though  it's  not  listed  as  being  in  use. 

4.  In  Publish  view,  position  the  asset  in  your  directory  structure  so  when  it's 
published,  it  can  be  found  by  any  HTML  page  referencing  it. 
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Because  paths  to  unmanaged  assets  aren't  edited  in  the  published  HTML,  you 
must  position  assets  so  the  original  paths  work.  See  "Customizing  Your  Site's 
Directory  Structure"  on  page  470. 
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Designing  and 
Implementing  Forms 

You  can  add  forms  to  your  site  to  collect  information  from  site  visitors;  for 
example,  to  survey  potential  customers,  conduct  credit-card  transactions,  have 
customers  register  products,  or  otherwise  process  information  visitors  submit. 

Using  forms,  visitors  can  type  in  text  fields,  and  select  options  using  check  boxes, 
radio  buttons,  and  combo  boxes.  You  can  use  the  NetObjects  Form  Handler 
component  to  have  responses  posted  in  an  email  or  copied  to  a  text  file  on  your 
Web  server.  Or,  you  can  assign  a  Common  Gateway  Interface  (CGI)  script  to 
process  responses,  for  example,  by  summarizing  them  on  a  confirmation  page. 
Check  with  your  server  administrator  or  ISP  for  setup  information. 

You  can  also  use  JavaScript  or  Visual  Basic  routines  with  forms.  See  Chapter  27, 
"Working  with  HTML  Directly." 

This  chapter  includes: 

♦  Creating  forms 

♦  Adding  text  fields,  check  boxes,  radio  buttons,  and  combo  boxes 

♦  Adding  Submit,  Reset,  and  custom  buttons 

♦  Submitting  data  via  email  or  to  a  text  file 

♦  Processing  data  with  a  CGI  script 

♦  Adding  hidden  fields  for  client-side  parameters 
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Form  Area  tool 


Creating  a  Form 


With  NetObjects  Fusion,  you  can  devote  an  entire  Layout  area  to  a  complex  form 
containing  many  items,  or  create  one  or  more  smaller  forms,  each  in  a  Layout 
Region,  table,  or  text  box.  One  form  might  log  product  registrations,  for  example, 
while  another  emails  customer  comments  to  a  product  manager.  You  can  also  add  a 
form  to  the  MasterBorder  so  it  appears  on  several  pages. 

1.  In  Page  view,  select  the  Form  Area  tool  from  the  Standard  toolbar,  and  draw  a 
rectangle  in  the  Layout  area  or  MasterBorder. 

The  Create  Form  dialog  appears. 

2.  Select  a  type  of  form. 


■*•  i!  ie  b'e      iN.;.r .  t-  b  ~J  loir.,  il  bvou'  Regionl 
C  Create  tent-based  form  [Tent  box) 
C  Create  form  in  a  Table 


C  Define  Layout  as  a  form  (limits  page  to  one  form) 


□  K 


Provides  flexibility  in  arranging  form  objects 

Good  for  forms  that  include  a  lot  of  text 
or  have  a  simple  layout 

Useful  for  forms  with  a  rigid  tabular  layout 


♦  Create  position-based  form  (Layout  Region)  creates  a  form  in  a  Layout  Region 
that  you  can  resize  and  drag  anywhere  on  the  page.  When  you  add  form 
objects,  text  boxes,  and  other  objects  to  the  Layout  Region,  you  can  freely 
position  and  align  them,  just  as  you  position  objects  in  a  Layout  area. 

♦  Create  text-based  form  (Text  box)  creates  a  form  in  a  text  box.  Text  you  type 
and  form  objects  you  add  appear  sequentially,  just  as  when  you  type.  This  is 
a  good  choice  for  forms  that  have  a  lot  of  text,  where  objects  appear 
sequentially,  or  that  have  a  simple  layout,  like  a  row  of  check  boxes  or  a 
single  column  of  fields.  A  text  box  form  typically  generates  less  HTML  when 
you  publish  than  a  Layout  Region  form. 

♦  Create  form  in  a  Table  creates  a  table  where  you  can  line  up  form  objects  by 
inserting  them  in  table  cells.  Each  cell  acts  like  a  text  box,  where  you  type 
and  add  objects  just  as  you  add  other  objects  to  a  table.  You  can  only  have 
one  table  for  the  entire  form. 

If  you  define  a  Layout,  Layout  Region,  or  text  box  as  a  form,  you  can  insert 
multiple  tables  to  help  align  form  objects. 
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♦  Define  Layout  as  a  form  (limits  page  to  one  form)  creates  a  single  form  on  the 
page  that  occupies  the  entire  Layout  area. 

3.  Click  OK. 

4.  Add  fields,  check  boxes,  and  other  objects  to  your  form,  along  with  images  and 
other  content,  as  described  in  "Adding  Objects  to  a  Form"  on  page  356. 


^ign  Our  Guestbook! 


And  we'll  send  you  a  complimentary  T-shirt! 


Address: 


E-mail:  ^ 
City/State:  [| 


T-shirt:  nM&nXL    |  Violet  j 


Reset  Submit 


[Please  let  us  know  how  you  like  our  services: 


Can  we  send  more  information  via:  ]  □  lUSPSl    □  [E-mail| 


Submit 


You  can  also  turn  an  existing  Layout  or  container  object  into  a  form.  Click  the 
Layout  area,  Layout  Region,  text  box,  or  table,  and  select  the  form  option  on  the 
General  tab  of  the  Properties  palette;  for  example,  Text  box  is  a  form. 
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Adding  Objects  to  a  Form 


You  can  add  any  standard  form  objects  to  a  form,  including  single-  and  multiple- 
line  text  fields,  check  boxes,  radio  buttons,  scrolling  lists,  and  drop-down  lists. 


Sign  Our  Guestbook 


[bTame 

1 

|Address 

1 

ICity 

1 

[State 

1 

£ip  Cod 

?  1 

[Email  Addre  s  s 

[T-shirt 

i 


Let  n;.  Vjv.-w  vvhar  y--u  tluiik  al.--:-ut  ■  ui  ;er-'ii:e; 


Small  Logo 
Large  Logo 


..an  we  s 


end 


you 


more  information? 


[res  |  nWo~ 


Submit 


Cancel 


-Edit  fields 

Checkboxes 
Drop-down  list 
Scrolling  list 

.  Multi-line  text  field 
.  Radio  buttons 

Form  buttons 


You  add  objects  to  a  form  using  the  Form  toolbar.  This  toolbar  appears  when  you 
first  create  the  form,  or  you  can  open  the  toolbar  from  the  View  menu  by  choosing 
Toolbars,  Form  Tools. 


Form  Tools 


_l       H       ®       E3       □  □ 


The  Form  toolbar  appears 
when  you  create  a  form 


Arrange  and  align  the  fields,  check  boxes,  and  other  objects  in  a  form,  just  as  you 
would  arrange  objects  in  a  Layout  area,  table,  or  text  box.  You  must  place  form 
objects  inside  a  form  to  make  them  work  as  part  of  the  form.  If  you  don't  place 
form  objects  inside  a  form,  a  red  warning  icon  appears  in  the  form  object. 

To  minimize  the  HTML  generated  by  a  Layout  Region  form,  align  its  objects  using 
the  options  on  the  Multi-Object  Palette  or  organize  the  objects  in  tables  or  text 
boxes.  See  "Aligning  and  Distributing  Objects"  on  page  83,  "Embedding  Objects  in 
a  Text  Box"  on  page  115,  and  "Adding  Text  and  Pictures  to  Cells"  on  page  222. 
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Browsers  display  form  objects  differently,  so  test  your  form  on  all  the  browsers  and 
platforms  you  plan  to  support. 


Note:  If  you  publish  pages  containing  forms  using  the  Fixed  Page  Layout  output  option,  the 
forms  may  not  display  properly  in  the  browser  and  the  form  objects  display  warning 
icons  in  Page  view. 


When  you  add  objects  to  a  form,  you  provide  a  name  or  argument  for  each  object 
that  is  passed  to  the  NetObjects  Form  Handler  component  or  CGI  script  that 
processes  responses.  These  names  can  be  used  to  output  or  otherwise  process  the 
text  typed  in  a  field,  or  the  state  of  each  check  box,  radio  button,  or  combo  box. 

If  you're  using  the  Form  Handler  component  to  output  responses,  you  must  name 
each  form  object  with  a  sequential  number  only,  beginning  with  1,  and  continuing 
with  2,  3,  and  so  on  because  of  the  design  of  the  component.  Don't  use  text 
characters  or  punctuation,  as  in  1-TextField.  For  Form  Handler  information,  see 
"Submitting  Responses  as  Plain  Text"  on  page  365. 

In  addition  to  names,  you  can  also  provide  a  value  to  be  sent  when  a  site  visitor 
selects  a  check  box,  radio  button,  or  item  in  a  combo  box.  For  example,  a  check  box 
named  Yellow  with  a  value  of  Yes  might  be  sent  to  a  CGI  script  as  Yellow=Yes, 
depending  on  the  script. 

Actions  you  add  with  NetObjects  Fusion  can  also  use  form  object  values  to 
manipulate  a  site  visitor's  response.  See  "Scripting  Parameter  Values"  on  page  328. 

If  you're  using  a  CGI  script,  you  might  need  to  coordinate  the  names  and  values 
you  enter  with  those  used  in  the  script.  Each  CGI  script  has  its  own  naming 
conventions,  but  in  general,  names  cannot  include  spaces  or  punctuation.  Check 
with  your  server  administrator  or  ISP  for  information. 


A  single-line  text  field  can  accommodate  just  a  few  words,  such  as  a  name  or  phone 
number.  After  creating  the  form  as  described  on  page  354: 

1.   In  Page  view,  select  the  Forms  Edit  Field  tool  from  the  Form  toolbar. 


Naming  Form  Objects 


Adding  a  Single-Line  Text  Field 


2.   Draw  a  rectangle  on  the  form. 

The  Forms  Edit  Field  Properties  palette  appears. 


Edit  Field  tool 


357 


Adding  Objects  to  a  Form 


3.   Set  the  Forms  Edit  Field  properties. 


Forms  Edit  Field  Properties 


Name:  |FormsEditField1 
leKt: 


|     Passwotd  fey 
Visible  length:  |e    ^-j-j  ell' 
MeK  length:  1 10  ^ 


characters 

HTML... 


Name  passed  to  the  script  processing  the  form 
Type  text  to  appear  in  the  field  by  default 
Select  to  hide  the  site  visitor's  typing 
Text  field  width,  measured  in  characters 

Maximum  number  of  characters  that  can  be 
entered  in  the  field 


♦  Name.  Type  the  name  for  this  field  that's  passed  to  the  CGI  script  processing 
the  form.  You  may  be  able  to  choose  any  name  or  one  may  be  required  for 
this  field  by  the  CGI  script. 

If  you're  using  the  Form  Handler,  use  a  number  indicating  the  object's  order 
in  the  output  text. 

♦  Text.  Type  text  to  appear  in  the  field  by  default.  This  text  is  submitted  as  the 
response  if  the  site  visitor  doesn't  replace  it. 

♦  Password  field.  Select  this  option  if  the  field  is  for  sensitive  information  like  a 
password  or  credit  card  number.  Characters  site  visitors  type  are  submitted 
to  the  script,  but  depending  on  the  browser,  visitors  see  asterisks,  bullets,  or 
nothing  at  all  as  they  type. 

This  option  does  not  create  password  protection  to  prevent  site  visitors  from 
visiting  certain  pages.  That  level  of  protection  can  only  be  provided  by 
scripts  used  by  the  form  or  by  permission  settings  on  the  server  itself. 

♦  Visible  length.  Enter  a  number  to  define  the  width  of  the  text  box  by 
specifying  the  number  of  characters  visible  in  the  field. 

♦  Max  length.  Enter  a  number  to  define  how  many  characters  site  visitors  can 
enter  in  the  field.  When  typing  exceeds  the  field's  visible  width,  text  scrolls 
up  to  this  number  of  characters. 

4.   To  add  a  label  to  the  field,  use  the  Text  tool  on  the  Standard  toolbar. 

Select  the  label  and  the  field  and  on  the  Multi- Object  Palette,  click  Align  Center 
to  make  sure  these  objects  appear  correctly  in  the  browser.  To  make  aligning 
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Multi-Line  tool 


labels  and  fields  easier,  include  the  field  and  label  in  the  same  text  box,  or  insert 
both  objects  in  table  cells. 

Adding  a  Multiple-Line  Text  Field 

To  provide  a  place  for  long  comments  or  descriptions,  you  can  add  a  multiple-line 
text  field.  Site  visitors  can  type  as  much  as  they  want,  and  text  scrolls  as  necessary. 
After  creating  the  form  as  described  on  page  354: 

1.  In  Page  view,  select  the  Forms  Multi-Line  tool  from  the  Form  toolbar. 

2.  Draw  a  rectangle  on  the  form. 

3.  Set  the  Forms  Multi-Line  properties. 


Forms  Multi-Line  Properties 


■  |o] 

Name  |FormsMultiLine1 


Tent:  I 


Visible Jength:  |6  ~ 7|  characters 
Visible  height:  [2  lines 

HTML... 


Name  passed  to  the  script  processing  the  form 
Type  text  to  appear  in  the  field  by  default 


♦  Name.  Type  the  name  for  this  field  that's  passed  to  the  CGI  script  processing 
the  form. 

If  you're  using  the  Form  Handler,  use  a  number  indicating  the  object's  order 
in  the  output  text. 

♦  Text.  Type  text  to  appear  in  the  field  by  default.  This  text  is  submitted  as  the 
response  if  the  site  visitor  doesn't  replace  it. 

♦  Visible  length.  Enter  a  number  to  define  the  width  of  the  text  box  by 
specifying  the  number  of  characters  visible  in  the  field. 

♦  Visible  height.  Enter  a  number  to  define  the  number  of  lines  visible  in  the 
field. 


4.   To  label  the  field,  use  the  Text  tool  on  the  Standard  toolbar. 
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Adding  Radio  Buttons 


® 


Radio  Button  tool 


Use  radio  buttons  when  you  want  site  visitors  to  choose  one  option  from  a  group. 
Clicking  one  radio  button  deselects  all  others  in  its  group.  After  creating  the  form  as 
described  on  page  354: 

1.  In  Page  view,  select  the  Radio  Button  tool  from  the  Form  toolbar. 

2.  Draw  a  rectangle  on  the  form. 

3.  Set  the  Forms  Radio  Button  properties. 


Forms  Radio  Button  Properties 


Group  name:  |FormsRadioButton1 

Value  sent:  | 

Default 
C  Selected 
f*  Not  selected 


Name  passed  for  the  group  to  the  script 
processing  the  form.  This  should  be  the  same 
for  all  buttons  in  the  group 

Value  passed  if  this  button  is  selected 


Group  name.  Type  the  name  for  this  group  of  buttons  that's  passed  to  the 
CGI  script  processing  the  form.  This  should  be  the  same  for  all  buttons  in 
the  group.  If  you're  using  the  Form  Handler,  use  a  number  indicating  the 
buttons'  order  in  the  output  text. 

Value  sent.  Type  the  value  passed  for  the  button  if  the  site  visitor  selects  it.  If 
you're  using  the  Form  Handler,  and  a  visitor  selects  a  button  named  Large  in 
a  group  named  4,  the  output  text  might  appear  as  4=Large. 

Default.  Choose  either  Selected  or  Not  selected  to  set  the  button's  initial 
state,  which  is  returned  as  the  response  if  the  site  visitor  doesn't  change  it. 
Remember  that  only  one  radio  button  in  a  group  can  be  selected  at  a  time 
and  this  only  works  if  all  buttons  in  the  group  have  the  same  group  name. 


4.   To  label  each  radio  button,  use  the  Text  tool  on  the  Standard  toolbar. 
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El 


Checkbox  tool 


Adding  Check  Boxes 

You  can  provide  check  boxes  for  making  one  or  more  selections  from  a  group  of 
options,  or  to  turn  a  single  option  on  or  off.  Unlike  radio  buttons,  any  number  of 
boxes  in  a  group  can  be  selected  at  the  same  time.  After  creating  the  form  as 
described  on  page  354: 

1.  In  Page  view,  select  the  Forms  Checkbox  tool  from  the  Form  toolbar. 

2.  Draw  a  rectangle  on  the  form. 

3.  Set  the  Forms  Checkbox  properties. 


Forms  Checkbox  Piopertie:- 


Name  passed  to  the  script  processing  the  form 
Value  that's  passed  if  this  box  is  checked 


♦  Name.  Type  the  name  for  this  check  box  that's  passed  to  the  script  processing 
the  form.  If  you're  using  the  Form  Handler,  use  a  number  indicating  the 
box's  order  in  the  output  text.  Each  check  box  must  have  a  separate  name. 

♦  Value.  Type  the  value  passed  for  the  box  if  the  site  visitor  checks  it.  If  you're 
using  the  Form  Handler,  and  a  visitor  checks  a  box  named  6  that  has  the 
value  Email,  the  output  text  might  appear  as  6=Email.  If  the  site  visitor 
doesn't  check  it,  no  value  is  sent  to  the  server. 

♦  Default.  Select  either  Checked  or  Unchecked  to  set  the  box's  initial  status, 
which  is  returned  as  the  response  if  the  site  visitor  doesn't  change  it. 

4.   To  label  each  check  box,  use  the  Text  tool  on  the  Standard  toolbar. 
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□ 


Combo  Box  tool 


Adding  a  Combo  Box 

If  a  long  list  of  check  boxes  or  radio  buttons  takes  up  too  much  space  in  your  form, 
you  can  list  options  in  a  combo  box.  Use  a  scrolling  list  if  you  want  site  visitors  to  be 
able  to  select  more  than  one  option,  which  is  a  space-saving  alternative  to  a  group  of 
check  boxes.  Or  use  a  drop-down  list  for  selecting  only  one  option,  which  is  an 
alternative  to  radio  buttons.  After  creating  the  form  as  described  on  page  354: 

1.  In  Page  view,  select  the  Forms  Combo  Box  tool  from  the  Form  toolbar. 

2.  Draw  a  rectangle  on  the  form. 

3.  Set  the  Forms  Combo  Box  properties. 


Forms  Combo  Box  Properties 


n  o 


□a 


Nam?:  |FormsComboBoKl   

Type:  Dropdown  list  C  List  boK 
Visible  height:  — — j  |jnes 


Name  passed  to  the  script  for  the  combo  box 


Names  and  values  passed  for  each  item  in  the  list 


♦  Name.  Type  the  name  for  this  combo  box  that's  passed  to  the  script 
processing  the  form.  If  you're  using  the  Form  Handler,  use  a  number 
indicating  the  combo  box's  order  in  the  output  text. 

♦  Type.  Select  whether  you  want  a  drop-down  list  that  displays  one  item  at  a 
time,  or  a  list  box  that  displays  several  items  in  a  scrolling  list. 

♦  Visible  height.  For  a  list  box,  enter  the  number  of  visible  lines  in  the  box. 

♦  Allow  multiple  selections.  For  a  list  box,  select  this  option  if  you  want  site 
visitors  to  be  able  to  select  more  than  one  item  in  the  list. 
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4.   To  add  items  to  the  combo  box  list,  click  the  plus  (+)  button  and,  in  the  Enter 
Value  dialog,  type  a  name  and  the  value  passed  to  the  script  for  the  item. 


Name  that  appears  in  the  list 
Value  passed  if  this  item  is  selected 


□ 


Forms  Button  tool 


♦  Name.  Type  the  name  passed  for  this  item,  which  is  also  the  name  that 
appears  in  the  list. 

♦  Value.  Type  the  value  passed  if  the  item  is  selected. 

♦  Selected  by  default.  Check  this  option  if  you  want  this  item  initially  selected. 
Unless  you're  creating  a  list  box  and  you  select  Allow  multiple  selections, 
only  one  item  in  the  list  can  be  selected. 

5.   To  label  the  list,  use  the  Text  tool  on  the  Standard  toolbar. 

To  remove  items  from  the  list,  select  the  item  and  click  the  minus  (-)  button.  Use 
the  arrow  buttons  to  rearrange  the  order  of  items  in  the  list. 

Adding  Submit,  Reset,  and  Custom  Buttons 

After  adding  objects  for  collecting  data  from  site  visitors,  you  must  add  a  Submit 
button  to  send  the  data  to  your  Web  server.  You  can  also  supply  a  Reset  button  so 
visitors  can  clear  the  form  and  start  over.  To  determine  how  the  server  handles  the 
information  entered  by  the  site  visitors,  you  can  use  the  NetObjects  Fusion  Form 
Handler  or  specify  a  custom  CGI  script. 

Note:  If  you're  using  the  Form  Handler  component  to  send  form  responses  in  an  email  ortoa 
text  file,  create  your  Submit  button  as  described  in  "Submitting  Responses  as  Plain 
Text"  on  page  365. 

After  creating  the  form  as  described  on  page  354: 

1.  In  Page  view,  select  the  Forms  Button  tool  from  the  Form  toolbar. 

2.  Draw  a  rectangle  on  the  form. 
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(*  Tent 


> 


The  button  label  can  be  text  or  a  picture 


Select  Button  to  create  a  custom  button 


Type:  | Submit  t| 

HTML...  -}■ 


Click  here  to  attach  a  script  defining  what  a 
custom  button  does 


♦  Name.  Use  the  name  your  CGI  script  references. 

♦  Text.  Type  the  button  label  text  in  the  field. 

♦  Image.  To  use  a  picture  as  a  label,  select  Image,  click  Browse,  and  choose  an 
image  file  from  the  Picture  File  Open  dialog. 


Note:  When  you  use  an  image  as  the  label  for  a  form  button,  that  button  can  only 
submit  information.  It  cannot  be  used  as  a  reset  button. 

♦  Type.  Choose  a  button  type: 

■0*  Submit  creates  a  button  that  sends  the  site  visitor's  responses  to  the  Form 
Handler  or  CGI  script  on  the  server. 

•❖■  Reset  creates  a  button  that  reverts  to  the  form's  initial  settings. 

<v*  Button  creates  a  custom  button  that  runs  the  script  you  add  using  the 
HTML  button. 

♦  HTML.  Opens  the  Object  HTML  dialog  so  you  can  add  a  script  that  runs 
when  site  visitors  click  the  custom  button.  See  "Accessing  an  Object's 
HTML"  on  page  422. 
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Submitting  Responses  as  Plain  Text 

You  can  have  responses  submitted  as  plain  text  to  a  file  on  the  Web  server  using  the 
Form  Handler  component.  When  you  use  the  Form  Handler,  you  don't  have  to 
provide  your  own  CGI  script,  the  Form  Handler  provides  it  for  you. 


Note:  Using  the  Form  Handler  component  might  require  configuration  of  your  Web  server.  To 
find  out  what's  required,  see  the  components  information  at  the  Workbench  link  from 
www.netobjects.com/support. 


Form  Handler  tool 


Submitting  Data  to  a  Text  File 

To  use  the  Form  Handler  component  to  copy  site  visitors'  responses  to  a  text  file  on 
your  Web  server,  use  the  component  tool  to  create  the  form's  Submit  button.  After 
creating  the  form  as  described  on  page  354: 

1.  In  Page  view,  select  the  Form  Handler  tool  from  the  NetObjects  Fusion 
Components  toolbar,  and  draw  a  rectangle  on  the  form. 

2.  Set  the  Form  Handler  properties. 


Form  Handler  Properties 


©  ]o  ] 

Form  Handler: 

True 

A  AA 

Button  Name 

Submit 

Publish  to 

Vindows 

Success  URL 

UntitledlO 

Error  URL 

Untitled11 

Output  File 

webinfo.tKt 

CGI-Bin  Directory 

assetsrcgi-b 

Abs.  Storage  Dir 

C:\webdata\ 

Required  field  1 

True 

Required  field  2 

: v.::"7t::: 

True 

♦  Button  Name.  Type  a  name  for  the  button's  label,  or  accept  Submit. 

♦  Publish  to.  From  the  drop-down  list,  choose  the  type  of  Web  server  you're 
publishing  to:  Windows,  Mac,  UNIX,  or  Email.  You  must  know  the  type  of 
server  as  well  as  how  the  server  is  configured  to  handle  CGI  scripts.  Ask  your 
ISP  or  server  administrator  or  check  the  Workbench  link  from 
www.netobjects.com/support.  If  you  choose  Email,  see  "Submitting  Data  in  an 
Email"  on  page  367. 
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♦  Success  URL.  Double-click  this  row  and  in  the  Link  dialog,  select  the  page  to 
display  when  a  visitor  correctly  completes  the  form.  Click  the  Link  button. 

♦  Error  URL  Double-click  this  row  and  in  the  Link  dialog,  select  the  page  to 
display  when  submission  fails,  for  example,  if  the  visitor  doesn't  fill  in  a 
required  field. 

♦  Output  File.  Type  a  name  for  the  file  you  want  responses  copied  to.  Do  not 
specify  a  path. 

♦  Perl  Path  for  UNIX.  If  you're  publishing  to  a  UNIX  server,  type  the  path  to  the 
Perl  application  on  the  server.  Perl  5  is  required  on  the  server. 

♦  CGI-Bin  Directory.  Type  the  path  to  the  directory  on  the  Web  server  where  the 
CGI  scripts  provided  by  Form  Handler  should  be  copied.  This  directory 
must  be  in  the  Publish  to  directory  or  lower  in  the  directory  hierarchy. 

♦  Abs.  Storage  Directory  (Windows  only)  or  Storage  Directory.  Type  the  path  to  the 
directory  on  the  server  where  you  want  to  put  the  output  file. 

♦  Required  fields.  For  each  field,  choose  whether  a  response  is  required  (True) 
or  not  (False)  for  a  submission  to  be  successful.  If  you  mark  a  field  True  and 
visitors  don't  fill  it  in,  they  see  the  Error  URL  when  they  submit  the  form. 

The  required  field  option  is  not  displayed  if  your  fields  are  not  named  as 
sequential  numbers.  If  any  object  in  your  form  isn't  listed  in  the  Form 
Handler  Properties  palette,  you  might  have  named  it  incorrectly.  See 
"Naming  Form  Objects"  on  page  357. 

Note:  You  must  configure  all  properties  listed  in  the  Form  Handler  or  the  script  will 
not  run.  If  your  form  fields  are  not  named  correctly,  the  script  will  also  fail. 
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Submitting  Data  in  an  Email 

You  can  also  use  the  NetObjects  Form  Handler  component  to  copy  site  visitors' 
responses  into  an  email  to  any  address  you  specify. 


Form  Handler  tool 


Note:  This  feature  is  not  supported  under  all  configurations  of  Internet  Explorer.  To  find  out 
what's  required,  see  components  information  at  the  Workbench  link  from 
www.netobjects.com/support. 

1 .  In  Page  view,  select  the  Form  Handler  tool  from  the  Component  toolbar,  and 
draw  a  rectangle  on  the  form  for  the  Submit  button. 

2.  On  the  Form  Handler  Properties  palette,  click  the  Publish  to  option  and  select 
Email. 

3.  Enter  the  email  address,  and  relabel  the  button  if  you  want. 

11113 


Form  Handler  Properties 


Form  Handler: 
|  Email 


"3  JJ 


Button  Name 

Submit 

Publish  to 

Email 

name@doma 

♦  Button  Name.  To  change  the  button's  label,  click  in  the  Button  Name  row  and 
type  a  name  in  the  Form  Handler  text  field. 

♦  Publish  to.  Choose  Email  from  the  drop-down  list  if  you  have  not  already 
done  so. 

♦  Email.  Click  and  type  the  email  address  to  which  responses  will  be  sent. 

Because  of  the  way  the  email  feature  works,  you  cannot  have  required  fields  in  the 
email  option.  If  you  want  both  features,  you  must  use  a  CGI  script  that  can  send 
email. 
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Processing  Data  with  a  CGI  Script 

To  process  form  responses  other  than  by  outputting  text  using  the  Form  Handler 
component,  use  a  custom  CGI  script.  A  CGI  script  is  a  program  that  controls  a 
program  on  your  Web  server.  Using  a  CGI  script,  you  can  format  responses  for  a 
particular  application,  summarize  them  on  a  page  that's  returned  to  the  site  visitor, 
or  do  practically  anything  else  with  the  data. 

Note:  Not  all  administrators  let  you  install  CGI  scripts  on  their  servers.  Some  provide  standard 
CGI  scripts  for  you  to  use,  and  a  few  don't  support  CGI  at  all. 

1.  In  Page  view,  click  anywhere  in  the  form  except  on  a  form  object. 

2.  On  the  Properties  palette,  click  the  Settings  button. 

For  a  text  box  form,  look  for  the  Settings  button  on  the  Text  Box  tab.  For  other 
forms,  look  on  the  General  tab. 

The  Form  Settings  dialog  appears. 


Form  Settings 


Form  name: 
-Settings  


Action: 

Browse... 

Method: 

P  Post 

r  Get 

Encoding  type:  [~~ 


3.  Specify: 

♦  Form  name.  Type  an  arbitrary  name  for  the  form.  This  is  required  by  some 
browsers. 

♦  Action.  Type  the  URL  to  the  CGI  script  on  a  server.  If  the  CGI  script  is 
already  on  the  server,  enter  its  URL  here;  for  example: 

http://www.hostxom/myaccount/fusionproject/assets/cgi-bin/myscript.cgi 
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Note:  Normally,  NetObjects  Fusion  publishes  custom  CGI  scripts  to  the  cgi-bin 
directory  specified  in  Publish  view.  If  your  server's  configuration  requires 
publishing  scripts  somewhere  else,  you  must  use  the  Alias  tab  of  the  Define 
Server  dialog  in  Publish  view  to  specify  that  location  in  the  CGI  script  field. 
This  applies  only  to  custom  CGI  scripts,  not  to  the  Form  Handler.  See 
"Creating  Aliased  Folders  and  Setting  the  CGI-Bin  Directory"  on  page  474. 

If  the  CGI  script  isn't  already  on  the  server  but  needs  to  be  published  along 
with  your  site's  assets,  click  Browse  and  select  the  script  file  to  be  published 
from  the  Open  dialog.  This  file  appears  in  the  Action  field.  NetObjects 
Fusion  adds  the  file  as  an  asset  and  puts  it  in  the  CGI  bin  directory. 

When  visitors  click  Submit,  the  server  executes  the  CGI  script  at  this  URL. 


Note:  If  the  URL  doesn't  point  to  your  server's  cgi-bin  folder,  you  must  customize 
your  site's  published  directory  structure  by  renaming  cgi-bin  appropriately. 
See  "Customizing  Your  Site's  Directory  Structure"  on  page  470. 

♦  Method.  Choose  a  method  for  sending  form  data  to  the  Web  server: 

■❖•  Post,  which  is  the  preferred  method,  sends  data  as  a  standard  stream  of 
name=value  pairs,  separated  by  an  ampersand  (&). 

<C-  Get  sends  the  values  of  the  form  variables  as  part  of  the  URL.  Use  Get 
with  care,  as  some  servers  truncate  data  sent  using  this  method. 

Often,  the  method  you  use  is  determined  by  the  scripts  you  use.  Check  your 
script's  documentation  for  information. 

♦  Encoding  type.  If  your  server  requires  data  to  be  encoded  in  a  particular 
format,  such  as  MIME  or  BinHex,  type  the  format  here. 

4.   Click  OK. 
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Adding  Hidden  Fields 

If  a  CGI  script  is  processing  your  form,  you  probably  need  to  use  hidden  fields  to 
pass  additional  information  to  it,  such  as  which  fields  must  be  filled  in  to  display  the 
success  page  or  where  to  return  data  once  it's  processed.  Site  visitors  don't  see  these 
fields,  but  the  values  are  submitted  to  the  script  with  form  responses. 

1.  In  Page  view,  click  anywhere  in  the  form  except  on  a  form  object. 

2.  On  the  Properties  palette,  click  the  Settings  button. 

For  a  text  box  form,  look  for  the  Settings  button  on  the  Text  Box  tab.  For  other 
forms,  look  on  the  General  tab. 

The  Form  Settings  dialog  appears. 

3.  Add  names  and  values  for  each  hidden  field  in  the  Form  Settings  dialog. 


OK       j       Cancel  | 


♦  To  add  a  field,  click  the  plus  (+)  button,  then  enter  a  name  and  value  for  the 
field  in  the  Enter  Value  dialog. 

♦  To  remove  a  field,  select  it  and  click  the  minus  (-)  button. 

♦  To  reorder  fields  in  the  list  and  define  their  order  in  the  submitted  data, 
select  a  field  and  click  the  up  or  down  arrow. 

4.   Click  OK. 

If  you're  using  the  Form  Handler  component  to  process  a  form,  don't  enter  hidden 
fields  yourself.  The  Form  Handler  enters  the  fields  it  needs. 
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Using  NetObjects  Fusion 
Components 

Components  are  pre-built  mini-applications  that  add  interactivity  to  your  site 
without  custom  programming  or  scripting.  Publish  components  and  Page 
components  are  available  in  NetObjects  Fusion  7.  The  component's  type  dictates 
where  it  appears  within  NetObjects  Fusion. 

NetObjects  Fusion  components  are  installed  when  you  install  NetObjects  Fusion. 
You  can  also  download  third-party  components,  such  as  NetObjects  Fusion 
Connector  for  Macromedia  ColdFusion  and  NetObjects  Fusion  Components  for 
IBM  HotMedia.  If  you  are  a  software  developer  and  want  to  create  your  own 
NetObjects  Fusion  Components,  sometimes  called  NFXes,  you  can  use  the 
NetObjects  Component  Development  Kit  (CDK).  For  information,  visit 
www.netobjects.com. 

Note:  You  cannot  preview  components  in  NetObjects  Fusion.  When  you  add  a  component  to 
a  page  and  preview,  you  see  a  placeholder  graphic.  To  see  how  the  component  works, 
you  must  publish  the  site  locally  or  remotely. 

This  chapter  explains: 

♦  Adding  NetObjects  Fusion  Components  to  a  page 

♦  Setting  component  properties 
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About  Components 

You  can  use  Publish  components  and  Page  components  in  NetObjects  Fusion.  The 
component's  type  dictates  where  it  appears  within  NetObjects  Fusion. 

♦  Publish  components  are  used  to  post-process  the  HTML  generated  by 
NetObjects  Fusion  or  to  change  NetObjects  Fusion's  FTP  capabilities.  See 
"Publishing  Components"  on  page  466. 

♦  Page  components  appear  on  toolbars  in  Page  view.  You  use  the  tools  to  place 
components  on  your  pages. 


Note:  To  add  copies  of  the  same  component  to  a  site,  you  must  place  a  new 
component  each  time.  Copying  and  pasting  components  can  lead  to  site 
corruption. 

NetObjects  Fusion  components  are  automatically  available  when  you  install 
NetObjects  Fusion.  These  11  components  appear  on  the  NetObjects  Fusion 
Components  toolbar  in  Page  view.  Ten  of  these  Page  components  are  discussed  in 
this  chapter;  the  Form  Handler  component  is  discussed  in  "Submitting  Responses 
as  Plain  Text"  on  page  365. 

In  addition,  you  can  download  third-party  components,  such  as  NetObjects  Fusion 
Connector  for  Macromedia  ColdFusion  and  NetObjects  Fusion  Components  for 
IBM  HotMedia.  Depending  on  their  type,  third-party  components  are  installed  in 
the  appropriate  place  in  NetObjects  Fusion.  Additional  component  toolbars 
become  available  in  Page  view  when  you  install  a  third-party  Page  component.  For 
information  about  third-party  components,  visit  Online  view. 

Adding  a  Rotating  Ad  Banner 

You  can  use  the  Ad  Banner  component  to  display  a  series  of  images  within  a 
banner.  You  determine  which  images  display,  associate  a  transition  with  each 
image,  set  the  amount  of  time  each  image  is  displayed,  and  specify  a  URL  linked  to 
each  image. 

NetObjects  Fusion  supports  .gifand.jpg  images  in  components.  See  "Choosing  an 
Image  Format"  on  page  178. 
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Ad  Banner  tool 


To  add  an  Ad  Banner: 

1.  In  Page  view,  select  the  Ad  Banner  tool  from  the  NetObjects  Fusion 
Components  toolbar. 

2.  Click  on  the  page  to  indicate  the  Ad  Banner's  location. 

An  Ad  Banner  placeholder  and  the  Ad  Banner  Properties  palette  appear. 


Rotating  Ad  Banner  Properties  PPEs 


Rotating  Ad  Banner: 


Banner  Type 

Image  Size 

Automatic  Resizing 

Disabled 

Pause  Time  (seconds) 

Number  of  Images 

Image  1 

CwNETOBJE 

URL  for  Image  1 

Transition  1 

Column 

Image  2 

CwNETOBJE 

URL  for  Image  2 

zi 

3.  Specify  the  Banner  Type. 

♦  Image  Size.  The  Ad  Banner  is  the  same  size  as  the  images  you  select. 

♦  Standard  Banner  Size.  Click  Banner  Size  and  choose  from  the  drop-down  list. 

♦  Custom.  Enter  a  width  and  height  for  the  Ad  Banner. 

4.  Enable  or  disable  Automatic  Resizing. 

If  Automatic  Resizing  is  disabled,  you  must  choose  images  that  are  the  same 
size.  If  Automatic  Resizing  is  enabled,  Ad  Banner  resizes  the  larger  images  to 
match  the  smallest  image.  For  best  results,  use  images  that  are  the  same  size. 

5.  Set  Pause  Time  to  control  how  long  each  image  is  displayed. 

6.  Enter  the  total  number  of  images  you  want  to  use.  You  can  use  from  1  to  50 
images. 

7.  To  select  an  image,  double-click  the  Image  row,  select  the  image  from  the 
Picture  File  Open  dialog,  and  click  Open. 

8.  Double-click  the  URL  for  Image  row  and  in  the  Link  dialog  select  a  type  of  link 
for  the  image.  See  "Creating  Links"  on  page  272. 


9.   Specify  the  link  information  and  click  Link. 


373 


Adding  DynaButtons 


10.  Click  the  Transition  row  and  select  a  transition  from  the  drop-down  list.  You 
can  choose: 

♦  Column  to  draw  increasingly  larger  columns  of  the  new  image  onto  the  old 
image.  The  new  image  appears  to  slide  in  from  behind  the  old  image. 

♦  Fade  to  change  one  image  into  another  by  drawing  a  set  of  random  pixels 
from  the  new  image  onto  the  old  image. 

♦  Rotate  to  make  it  appear  as  though  one  image  is  rotating  upward  from  below 
the  other  image. 

♦  Smash  to  drop  the  new  image  onto  the  old  one.  The  old  image  appears  to 
crumble  under  the  weight  of  the  new  image. 

♦  Tear  to  make  it  appear  as  though  the  old  image  is  ripped  away  to  reveal  the 
new  image. 

♦  Unroll  to  place  the  new  image  on  top  of  the  old  image  and  unroll  it. 

When  the  site  displays  in  the  browser,  the  sequence  begins  with  a  random  image 
and  its  associated  transition. 

11.  Repeat  steps  7  through  10  for  each  image  you  want  to  rotate  into  the  Ad  Banner. 

You  can  add  an  action  to  an  object  using  the  Actions  tab.  See  Chapter  22,  "Building 
Dynamic  Pages." 

Adding  DynaButtons 

DynaButtons  are  Java  buttons  that  link  to  another  page  on  your  site,  other  sites,  or  a 
specific  file.  You  can  place  DynaButtons  anywhere  on  your  pages  and  assign  up  to 
20  buttons  to  a  DynaButton  bar.  In  addition,  you  can  assign  up  to  20  sub-buttons 
to  each  DynaButton.  You  can  create  sub-buttons  for  navigating  from  a  main  page 
to  pages  at  a  lower  level. 

When  you  publish  the  site,  each  button  appears  in  the  browser  in  the  primary 
button  style  selected  for  the  site  and  displays  the  name  of  the  page  to  which  it  is 
linked.  You  cannot  assign  custom  images  to  DynaButtons.  The  button's  style  is 
determined  by  your  SiteStyle.  To  use  custom  images  for  buttons,  use  the  Picture 
Rollover  tool. 

Because  a  DynaButton  is  an  active  link,  the  button  appears  active  when  a  site  visitor 
moves  the  mouse  pointer  over  the  DynaButton  or  clicks  the  button.  The  site  visitor 
can  click  the  DynaButton  to  go  to  the  appropriate  link. 
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To  add  DynaButtons  and  set  properties: 


DynaButtons  tool 


1.  In  Page  view,  select  the  DynaButtons  tool  from  the  NetObjects  Fusion 
Components  toolbar. 

2.  Click  on  the  page  to  indicate  the  DynaButtons'  location. 

A  DynaButtons  placeholder  and  the  DynaButtons  Properties  palette  appear. 


DynaButtons  Properties 

l-H 

O  ]o  ] 

DynaButtons: 

Orientation 

Horizontal 

Number  of  Buttons 

'  

Button  1 

Use  Sub-Buttons  1 

No 

3.  Select  the  buttons'  orientation — vertical  or  horizontal — from  the  drop-down 
list. 

4.  Click  the  Number  of  Buttons  row,  specify  how  many  buttons  you  want,  and 
click  the  check  mark. 

5.  Double-click  the  number  row,  such  as  Button  1. 

The  Link  dialog  appears.  You  can  link  this  button  to  another  page,  file,  smart 
link,  or  external  link.  See  "Creating  Links"  on  page  272. 

6.  Specify  the  link  information  and  click  Link. 

The  details  of  the  link  appear  in  the  right  column  of  the  button  row. 

You  can  add  an  action  to  an  object  using  the  Actions  tab.  See  Chapter  22,  "Building 
Dynamic  Pages." 

Adding  Sub-Buttons 

If  a  DynaButton  contains  sub-buttons,  the  sub-buttons  appear  when  a  site  visitor 
clicks  the  DynaButton.  The  sub-button  shows  information  about  the  link  associated 
with  the  button.  For  example,  if  a  sub-button  is  linked  to  an  external  link,  the  sub- 
button  displays  the  asset  name  for  the  external  link. 
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To  add  sub-buttons  and  set  the  properties: 

1.  In  Page  view,  create  a  DynaButton  as  described  in  "Adding  DynaButtons"  on 
page  374. 

2.  Double-click  the  Use  Sub-Buttons  row. 

Yes  appears  in  the  right  column  and  NetObjects  Fusion  adds  a  Number 
Sub-Buttons  row  under  the  Use  Sub-Buttons  row. 


DynaButtons  Properties  f 

l-H 

©  ]o  ] 

DynaButtons: 

[Orientation 

Horizontal 

Number  of  Buttons 

Button  1 

['.':-  i'jt-  E -j"-:-r.:  i 

Yes 

Number  Sub-Buttons  1 

Sub-Button  1.1 

3.  To  specify  the  number  of  sub-buttons,  select  the  Number  Sub-Buttons  row, 
enter  the  number  of  buttons,  and  click  the  check  mark. 

The  limit  is  20  sub-buttons.  The  appropriate  number  of  sub-button  rows 
appear,  numbered  in  sequential  order. 

4.  To  define  the  link  for  each  sub-button,  double-click  the  appropriate 
sub-button  row,  such  as  Sub-Button  1,2.  The  first  number,  in  this  case  the  1, 
identifies  the  button  for  which  the  sub-button  was  created,  and  the  second 
number  is  the  number  of  the  current  sub-button. 

The  Link  dialog  appears.  See  "Creating  Links"  on  page  272. 

5.  Specify  the  link  information  and  click  Link. 

6.  Repeat  steps  4  and  5  to  create  and  define  each  sub-button. 
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Picture  Loader  tool 


Loading  Pictures  onto  Your  Site 

Use  the  NetObjects  Picture  Loader  Component  to  load  an  image  from  a  site  other 
than  your  own.  You  can  use  this  to  place  advertising  banners  if  the  banners  are 
located  on  a  server  other  than  your  Web  server. 

To  load  a  picture  from  an  external  source: 

1.  In  Page  view,  select  the  Picture  Loader  tool  from  the  NetObjects  Fusion 
Components  toolbar. 

2.  Draw  a  box  on  the  page  to  indicate  where  you  want  to  place  the  picture. 
A  placeholder  and  the  Picture  Loader  Properties  palette  appear. 

ZEE 


Picture  Loader  Properties 


w  o  | 

Picture  Loader: 


r 


3.  Click  the  Image  URL  row  and  type  the  URL  where  the  picture  is  located. 
Be  sure  to  type  the  complete  URL. 

4.  Click  the  check  mark. 

You  can  add  an  action  to  an  object  using  the  Actions  tab.  See  Chapter  22,  "Building 
Dynamic  Pages." 
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Adding  a  Go  Menu 


You  can  use  the  Go  Menu  component  to  easily  create  a  drop-down  navigation 
menu,  with  each  menu  item  corresponding  to  a  single  page  in  the  site. 

1.  In  Page  view,  select  the  Go  Menu  tool  from  the  NetObjects  Fusion  Components 
toolbar. 

2.  Draw  a  box  on  the  page  where  you  want  to  place  the  Go  Menu. 
The  Go  Menu  dialog  appears. 

^Menu  Items  ^Button  Format  |  


Home 
Mission 
o  Q  Events 

~J  Next  Tour 
o  Q  Contest 


Menu  Item  Name 


Move  up     Move  down  Delete 


3.  On  the  Menu  Items  tab,  select  a  link  type  from  the  drop-down  list  and  set  up  a 
link  to  the  items  you  want  to  include  on  the  Go  Menu.  See  "Creating  Links"  on 
page  272. 

4.  From  the  list  on  the  left,  select  the  specific  items  you  want  to  include  on  the  Go 
menu  and  click  the  right  arrow  to  move  them  into  the  Link  column.  You  can 
include  up  to  50  items  on  the  menu. 

♦  To  change  the  way  an  item  is  listed  on  the  menu,  double-click  it  in  the  Menu 
Item  Name  column  and  type  a  new  name. 

♦  Select  an  item  and  click  the  Move  up  or  Move  down  button  to  change  the 
order  of  items  on  the  menu. 


♦  To  delete  an  item,  select  it  and  click  Delete. 
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5.   Click  the  Button  Format  tab. 


|go  Menu 

Menu  Items  Button  Format 

Example 
1  ABC  jJ_GoJ 

Choose  one  of  the  following  formats: 
®  Use  forms  hutton 

|  ABC  © 

Text:  |go 
O  Use  custom  graphic 

|  ABC 

| C:\NetObj sets  Fu^  |  Browse  | 
O  No  hutton  (pull  down  menu  selection  will  ti  ijjjjer  link) 

OK        |    Cancel  | 

6.  Select  one  of  the  three  formats.  An  example  of  each  format  is  shown  on  the  left. 

7.  Click  OK. 

8.  To  change  the  items  included  on  the  Go  Menu  or  the  button  format,  use  the  Go 
Menu  Properties  palette. 


Go  Menu  Properties  TH 

0  o  I 

Go  Menu: 

Forms  Button 

[Button  Format 

Forms  Buttcfl 

Button  Tent 

3o 

Number  of  Items 

5 

URL  for  Item  1 

Mission 

Tent  for  Item  1 

Mission 

URL  for  Item  2 

Activities  ! 

Tent  for  Item  2 

Activities 

URL  for  Item  3 

\lent  Tour 

Tent  for  Item  3 

\lent  Tour  ^ 

You  can  add  an  action  to  an  object  using  the  Actions  tab.  See  Chapter  22,  "Building 
Dynamic  Pages." 
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Rollover  Picture  tool 


Adding  Pictures  That  Roll  Over 


You  can  use  the  Picture  Rollover  component  to  create  JavaScript  rollovers  for  any 
image  on  your  site.  Because  this  component  uses  JavaScript,  the  colors  of  your 
images  are  not  compromised. 

To  view  a  rollover  picture,  site  visitors  must  use  Netscape  Navigator  3.x  and  up  or 
Microsoft  Internet  Explorer  3.x  and  up. 

To  add  pictures  that  roll  over: 

1.  In  Page  view,  select  the  Picture  Rollover  tool  from  the  NetObjects  Fusion 
Components  toolbar. 

2.  Draw  a  box  on  the  page  where  you  want  to  locate  the  pictures. 

A  picture  placeholder  and  the  Picture  Rollover  Properties  palette  appear. 

ZEE 


Picture  Rollover  Properties 


G  ]o  ] 


Picture  Rollover: 

I  □□_ 


3.   To  specify  the  first  image  to  display,  double-click  the  Initial  image  row,  select 
the  image  from  the  Picture  File  Open  dialog,  and  click  Open. 


380 


Chapter  25    Using  NetObjects  Fusion  Components 


The  Picture  Rollover  Properties  palette  changes  and  displays  two  new  rows- 
Mouse  over  image  and  Mouse  out  image. 


Picture  Rollover  Properties 


iEEl 


Picture  Rollover: 
| 


"□□J 


[initial  image 

□^NetObjects 

Mouse  over  image 

Mouse  out  image 

Link  URL 

1  1 

4.  To  specify  the  image  to  display  when  the  mouse  pointer  moves  over  the  image, 
double-click  the  Mouse  over  image  row,  select  the  image  from  the  Picture  File 
Open  dialog,  and  click  Open. 


Note:  The  images  you  select  for  rollover  pictures  are  resized  to  the  size  of  the  first 
image  you  select.  For  best  results,  use  images  that  are  the  same  size. 

5.  To  specify  which  image  to  display  when  the  site  visitor  moves  the  mouse  pointer 
off  the  picture,  double-click  the  Mouse  out  image  row,  select  the  image  from  the 
Picture  File  Open  dialog,  and  click  Open. 

6.  To  link  the  image  to  a  specific  URL,  double-click  the  Link  URL  row. 

The  Link  dialog  appears.  Because  the  entire  image  is  treated  as  one  object,  you 
can  link  it  to  another  page,  file,  smart  link,  or  external  link,  such  as  another  site. 
See  "Creating  Links"  on  page  272. 

7.  Specify  the  link  information  and  click  Link. 

The  details  of  the  link  appear  in  the  right  column  of  the  button  row. 

You  can  add  an  action  to  an  object  using  the  Actions  tab.  See  Chapter  22,  "Building 
Dynamic  Pages." 
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Rotating  Picture  tool 


Adding  Rotating  Pictures 


You  can  use  the  Rotating  Picture  component  to  display  different  pictures  in 
succession  in  the  same  place  on  the  page.  For  example,  you  could  rotate  among 
several  images  that  advertise  new  products  or  current  sale  items. 

To  add  a  rotating  picture,  you  specify  the  image  to  display  and  the  number  of 
seconds  to  pause  before  displaying  the  next  picture  in  the  sequence.  You  can  also 
assign  a  link  to  each  picture. 

NetObjects  Fusion  supports  .gifand.jpg  formats  in  components.  See  "Choosing  an 
Image  Format"  on  page  178. 

To  add  pictures  that  rotate  and  set  their  properties: 

1.  In  Page  view,  select  the  Rotating  Picture  tool  from  the  NetObjects  Fusion 
Components  toolbar. 

2.  Draw  a  box  on  the  page  to  indicate  where  you  want  to  place  the  picture. 

A  rotating  picture  placeholder  and  the  Rotating  Picture  Properties  palette 
appear. 


Rotating  Picture  Properties 


3|G| 

Rotating  Picture: 


ZEE 


Pause  Time  (Seconds) 

2 

Number  of  Images 

Image  1 

D:\NETOBJEi 

URL  for  Image  1 

Image  2 

D:\NETOBJE 

URL  for  Image  2 

Image  3 

D:\NETOBJE 

URL  for  Image  3 

3.  To  set  the  number  of  seconds  each  picture  is  displayed  before  moving  to  the 
next  one,  click  the  Pause  Time  (Seconds)  row,  specify  the  number  of  seconds, 
and  click  the  check  mark. 

4.  To  set  the  number  of  different  images  to  display  in  the  rotating  picture,  double- 
click the  Number  of  Images  row,  specify  the  number  of  images,  and  click  the 
check  mark. 
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Screen  Door  tool 


You  can  display  up  to  50  images  for  your  rotating  pictures.  An  Image  row  and 
URL  for  Image  row  for  each  image  you  specify  appears. 

Note:  The  images  you  select  for  rotating  pictures  are  resized  to  the  size  of  the  first 
image  you  select.  For  best  results,  use  images  that  are  the  same  size. 

5.  Double-click  an  Image  row,  select  an  image  file  from  the  Picture  File  Open 
dialog,  and  click  Open. 

6.  To  create  a  link  for  this  image,  double-click  the  image's  URL  for  Image  row, 
then  in  the  Link  dialog  select  the  type  of  link.  See  "Creating  Links"  on  page  272. 

7.  Specify  the  link  information  and  click  Link. 

8.  Repeat  steps  5  through  7  for  each  image. 

You  can  add  an  action  to  an  object  using  the  Actions  tab.  See  Chapter  22,  "Building 
Dynamic  Pages." 

Directing  Visitors  to  a  Browser-Specific  Page 

The  Screen  Door  component  detects  the  visitor's  browser  type  and  redirects  the 
visitor  to  a  page  targeted  for  that  specific  browser.  You  can  choose  to  direct  a  visitor 
to  Netscape  Navigator  4.x,  Microsoft  Internet  Explorer  4.0  and  up,  Netscape 
Navigator  3.0,  or  Microsoft  Internet  Explorer  3.0. 

The  Screen  Door  is  not  visible  on  the  page.  You  might  want  to  include  information 
on  the  page  to  let  site  visitors  know  they  are  being  directed  to  another  page. 

You  can  only  include  one  Screen  Door  per  page. 

1.  In  Page  view,  select  the  Screen  Door  tool  from  the  NetObjects  Fusion 
Components  toolbar. 

2.  Draw  a  box  in  the  Layout  area  of  the  page  where  you  want  to  place  the  Screen 
Door.  This  component  does  not  work  when  placed  in  a  MasterBorder. 
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A  Screen  Door  placeholder  and  the  Screen  Door  Properties  palette  appear. 
333 


Screen  Door  Properties 


0 


"□□J 


Method 

JavaScript  [cl 

Pause 

No 

Default  page 

Netscape  4.0  + 

Internet  Explorer  4  0  • 

Netscape  3  0 

Internet  Explorer  3  0 

3.  Choose  a  Method. 

♦  JavaScript  (client)  works  for  all  browsers  except  the  few  that  do  not  support 
the  META  tag. 

♦  ASP  (server)  requires  that  your  Web  server  is  ASP  compliant. 

If  you  are  publishing  to  an  ASP  server,  make  sure  your  server  administrator 
updates  the  browsecap.ini  file  each  time  there  is  a  browser  update.  This  file 
allows  the  server  to  recognize  the  new  version  of  the  browser,  which  in  turn 
allows  the  Screen  Door  component  to  identify  the  browser  correctly.  If 
browsecap.ini  is  not  updated,  the  Screen  Door  will  not  know  where  to  send  a  site 
visitor.  For  an  updated  version  of  browsecap.ini,  go  to  www.  microsoft.com. 

4.  Choose  to  pause  or  not  pause  before  redirecting  a  site  visitor.  If  you  set  Pause  to 
Yes,  enter  the  number  of  seconds  you  want  to  pause. 

5.  Set  up  appropriate  links  for  the  default  page  and  for  each  individual  browser 
type.  See  "Creating  Links"  on  page  272. 
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Adding  a  Site  Map  Button 


Site  Mapper  is  a  Java  navigation  applet  that  site  visitors  can  use  to  create  an 
interactive  map  of  a  site.  If  your  site  is  large,  Site  Mapper  simplifies  navigation  by 
providing  a  detailed  view  of  the  site's  levels.  Using  the  site  map,  visitors  can  jump 
directly  from  page  to  page  without  using  the  page  navigation  controls. 

The  Site  Map  button  provides  three  ways  for  visitors  to  view  the  site: 

♦  By  structure,  similar  to  Site  view  in  NetObjects  Fusion. 

♦  In  an  outline  view 

♦  By  searching  for  certain  words 


3  Site  Mappei  -  Miciosoll  Internet  Exploi 
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Structure  |  Outline  |  Search 
Home 


5  ho'.-.1  up  to  Level:      f~  2     (*  All 


Site  visitors  can  view  the 
.  site  three  ways.  This  map 
shows  the  structure 

■  When  site  visitors  move 
the  pointer  over  a  page, 
the  page  name  appears 

The  size  of  each  node 

■  adjusts  so  the  entire  tree 
fits  in  the  window.  With  a 
large  site,  the  nodes  may  be 
too  small  to  use 


■  Select  the  number  of  levels 
to  display 


■ft 


Site  Mapper  tool 


To  add  a  Site  Map  button  and  set  its  properties: 

1.  In  Page  view,  display  the  page  where  you  want  to  add  the  Site  Mapper 
component.  The  Site  Mapper  does  not  show  pages  above  this  page  in  the  site 
hierarchy. 

If  you  place  the  Site  Mapper  component  in  a  MasterBorder,  you  can  place  it  on 
any  page  using  that  MasterBorder.  It  is  recommended,  however,  that  you  place  a 
Site  Mapper  component  in  the  Layout  of  a  single  page  in  the  site. 

2.  Select  the  Site  Mapper  tool  from  the  NetObjects  Fusion  Components  toolbar. 

3.  Draw  a  box  on  the  page  to  indicate  the  location  of  the  Site  Map  button. 
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The  Site  Map  button  and  the  Site  Mapper  Properties  palette  appear. 


Site  Mapper  Properties  FF\ 

0  ]o  ] 

Site  Mapper: 

1  ' 

in. ,.]-                      OtrjE  r-i'E  >£ 

4.   To  change  the  image  displayed  for  the  Site  Map  button,  double- click  the  Image 
row,  then  select  the  image  file  you  want  from  the  Picture  File  Open  dialog. 

The  selected  image  appears  on  the  page. 

You  can  add  an  action  to  an  object  using  the  Actions  tab.  See  Chapter  22,  "Building 
Dynamic  Pages." 

Using  Ticker  Tape 

If  you  want  to  announce  a  special  promotion  or  event  on  your  site,  you  can  use  the 
Ticker  Tape  component  to  add  a  scrolling  message  to  a  page  and  set  the  colors  and 
speed  used  to  display  the  message. 

To  add  a  Ticker  Tape  display  and  set  its  properties: 

1.  In  Page  view,  select  the  Ticker  Tape  tool  from  the  NetObjects  Fusion 
Components  toolbar. 

2.  Draw  a  rectangle  to  indicate  the  location  and  size  of  the  Ticker  Tape  display. 


Ticker  Tape  tool 
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The  Ticker  Tape  placeholder  and  the  Ticker  Tape  Properties  palette  appear. 


Ticker  Tape  Properties 

.1x1 

O  ]o  ] 

Ticker  Tape: 

1  

[Number  of  Messages 

[Text  for  Message  1 

URL  for  Message  1 

Speed 

25 

I  Frame  Color 

lightGray 

Background  Color 

black 

LED  Color 

green 

LED  Type 

0 

LED/Font  Size 

3.  To  display  multiple  messages  in  the  Ticker  Tape  display,  click  the  Number  of 
Messages  row,  enter  the  number,  and  click  the  check  mark. 

You  can  specify  up  to  50  messages.  A  new  Text  for  Message  and  URL  for 
Message  row  appears  for  each  message  you  specified. 

4.  Click  the  Text  for  Message  row  and  type  the  message  in  the  Ticker  Tape  text 
entry  field.  Click  the  check  mark. 

5.  Double-click  the  URL  for  Message  row  and  in  the  Link  dialog  select  a  type  of 
link  for  the  message.  See  "Creating  Links"  on  page  272. 

6.  Specify  the  link  information  for  this  message  and  click  Link. 

7.  Repeat  steps  4  through  6  for  each  message  in  the  Ticker  Tape  display. 

8.  Click  the  Speed  row,  and  specify  the  scrolling  speed  ( 1  to  50)  of  the  message. 

Specify  a  higher  number  to  make  the  message  scroll  faster;  a  lower  number  to 
make  the  message  scroll  slower. 

9.  To  set  the  frame,  background,  and  LED  colors,  click  the  appropriate  row,  then 
select  the  color  you  want  from  the  drop-down  list. 

♦  Frame  Color  determines  the  border  color  of  the  Ticker  Tape  display.  The 
default  is  gray. 

♦  Background  Color  determines  the  background  color  of  the  Ticker  Tape 
display.  The  default  is  black. 

♦  LED  Color  determines  the  color  of  the  message  text.  The  default  is  green. 


387 


Adding  Time  Based  Pictures 


10.  Click  the  LED  Type  row  and  select  a  style  for  the  LED  text. 

♦  0  is  square  dots 

♦  7  is  circular  dots 

♦  2  is  regular  text 

11.  Click  the  LED/Font  Size  row  and  select  a  size  for  the  message  text. 

You  can  add  an  action  to  an  object  using  the  Actions  tab.  See  Chapter  22,  "Building 
Dynamic  Pages." 


Time  Based  Picture  tool 


Adding  Time  Based  Pictures 


You  can  use  the  Time  Based  Picture  component  to  display  different  pictures  at  the 
same  location  on  your  page  at  the  time  of  day  you  specify.  You  select  the  image  to 
display  and  specify  the  hour  at  which  to  display  it.  The  browser  automatically 
displays  the  picture  at  the  specified  time.  The  picture  remains  on  the  page  until  it  is 
time  for  the  next  picture  to  be  displayed. 

NetObjects  Fusion  supports  .gif  and  .jpg  formats  in  components.  See  "Choosing  an 
Image  Format"  on  page  178. 

To  add  time  based  pictures  and  set  the  properties: 

1.  In  Page  view,  select  the  Time  Based  Picture  tool  from  the  NetObjects  Fusion 
Components  toolbar. 

2.  Draw  a  box  on  the  page  where  you  want  to  locate  the  picture. 

A  picture  placeholder  and  the  Time  Based  Picture  Properties  palette  appear. 


Time  Based  Picture  Properties 


u  o  | 

Tim*  Based  Picture: 


Number  of  Images 

Image  1 

D:\NETOBJE 

URL  for  Image  1 

Start  Time  for  Image  1 

12am 

Image  2 

D:\NETOBJE 

URL  for  Image  2 

Start  Time  for  Image  2 

1am 

Image  3 

D:\NETOBJE 

URL  for  Image  3 

zi 

The  number  of 
images  is  3  by 
default 
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3.  Click  the  Number  of  Images  row  and  specify  the  number  of  images  you  want  to 
rotate. 

You  can  use  up  to  24  images.  NetObjects  Fusion  adds  an  Image,  Start  Time  for 
Image,  and  URL  for  Image  row  for  each  image. 

4.  To  select  an  image,  double-click  the  Image  row,  select  the  image  from  the 
Picture  File  Open  dialog,  and  click  Open. 

5.  To  create  a  link  to  the  image,  double-click  the  URL  for  Image  row  and  in  the 
Link  dialog  select  a  type  of  link  for  the  image.  See  "Creating  Links"  on  page  272. 

6.  Click  the  Start  Time  for  Image  row  and  select  a  starting  time  from  the  drop- 
down list. 

The  start  time  determines  when  the  image  is  displayed  on  your  site.  You  can 
select  one-hour  increments  from  12  a.m.  to  12  p.m.  The  image  is  displayed  until 
the  next  image's  starting  time.  Be  sure  images  have  consecutive  starting  times. 

7.  Repeat  steps  4  through  6  for  each  image  you  add. 

You  can  add  an  action  to  an  object  using  the  Actions  tab.  See  Chapter  22,  "Building 
Dynamic  Pages." 
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Data  Publishing 

NetObjects  Fusion  makes  it  easy  to  publish  information  such  as  employee 
directories,  product  and  service  catalogs,  and  event  schedules.  You  can  enter, 
manage,  and  store  this  information  as  records  either  in  your  NetObjects  Fusion  site, 
or  in  an  external  application  such  as  a  database  or  spreadsheet. 

To  publish  the  data,  you  specify  its  source  and  create  a  layout  for  the  pages  that  will 
display  it.  NetObjects  Fusion  uses  your  Layout  to  create  a  separate  page  for  each 
record,  and  can  automatically  provide  site  visitors  with  buttons  to  navigate  between 
them. 

This  chapter  describes  how  to  publish  data  using  NetObjects  Fusion,  including: 

♦  Static  and  dynamic  data  publishing 

♦  Creating  a  data  object 

♦  Storing  data  internally 

♦  Using  data  stored  externally 

♦  Creating  a  data  list 

♦  Creating  stacked  pages 
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Static  and  Dynamic  Data  Publishing 

NetObjects  Fusion  supports  two  kinds  of  data  publishing:  static  and  dynamic. 

♦  Static  data  publishing  takes  any  kind  of  data — text,  pictures,  multimedia  files, 
and  so  on — from  a  database  or  spreadsheet.  NetObjects  Fusion  publishes  the 
data  on  your  site,  where  it  remains  unchanged — static — until  the  source  data  is 
changed  and  the  site  is  re-published.  Static  data  publishing,  which  is  the  focus  of 
this  chapter,  uses  data  objects  that  derive  data  from  internal  or  external  sources. 

♦  Dynamic  data  publishing  makes  it  possible  to  refresh  the  data  each  time  a  visitor 
goes  to  the  site.  When  the  browser  requests  the  data,  it  is  assembled  on  the  spot; 
it  does  not  depend  on  re-publishing  the  site. 

Dynamic  data  publishing  requires  third-party  components.  Third-party 
publishers  regularly  release  new  components  for  NetObjects  Fusion.  For  the 
latest  information,  visit  Online  view. 

Storing  Data  with  NetObjects  Fusion 

Using  the  data  publishing  capabilities  of  NetObjects  Fusion,  you  can  store  text  and 
pictures  in  a  database  internal  to  your  site,  or  import  data  from  external  sources 
such  as  Microsoft  Excel  or  Access  using  an  ODBC  data  source  connection.  In  both 
cases,  NetObjects  Fusion  publishes  your  data  in  standard  HTML  pages.  This  makes 
it  easy  to  add  listings,  such  as  product  and  service  catalogs,  employee  directories, 
and  event  schedules  to  your  site. 

You  use  the  following  objects  when  you  publish  data  in  NetObjects  Fusion: 

♦  Data  objects.  A  data  object  is  a  collection  of  data  fields  that  define  what  data  will 
be  published.  Creating  a  data  object  is  the  essential  first  step  in  adding  internal 
or  external  data  to  your  site.  The  data  object  becomes  an  asset  of  your  site. 
When  you  reference  records  internally,  you  must  specify  the  data  fields  you 
want  to  store.  When  you  store  records  from  external  data,  NetObjects  Fusion 
includes  all  fields  available  in  the  source. 

♦  Data  fields.  Defined  in  the  data  object,  data  fields  appear  on  stacked  pages  and 
are  the  containers  for  the  data  in  your  site.  You  can  arrange  and  label  data  fields; 
the  arrangement  appears  on  all  stacked  pages. 

♦  Data  lists.  The  data  list  appears  on  the  parent  page  of  the  stacked  pages  that 
contain  the  actual  data.  The  data  list  functions  as  a  table  of  contents  for  the 
internal  or  external  data  in  your  site.  You  select  the  fields  you  want  to  display  as 
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column  headers  in  the  list.  The  field  data  from  either  the  internal  or  external 
source  populates  the  data  list  when  you  publish. 

♦  Stacked  pages.  Each  record  in  your  database  appears  on  a  separate  stacked  page 
below  the  page  containing  the  data  list.  Stacked  pages  are  not  siblings  of  each 
other,  but  instead  are  iterations  of  the  same  page,  containing  the  fields  defined 
in  your  data  object. 

The  following  illustration  shows  the  relationship  of  these  objects  for  internal  and 
external  databases. 


Data  Object 


Field 

Example 

Name 

Widget 

Photo 

Q 

Price 

SI. 99 

Stacked  Pages 


For  example,  you  could  publish  a  backpack  catalog  on  your  site  with  a  record  for 
each  backpack.  Each  row  in  the  data  list  lets  the  site  visitor  navigate  to  the  stacked 
page  that  contains  the  corresponding  backpack's  description,  photo,  and  price. 

To  create  the  backpack  catalog,  your  first  step  is  to  create  a  backpack  data  object. 
You  can  define  a  data  object  once  and  use  it  in  different  filtered  data  lists.  For 
example,  you  can  create  one  data  list  of  all  the  backpacks  in  your  database.  With  the 
same  data  object,  you  can  create  additional  data  lists  of  internal  frame  backpacks, 
external  frame  backpacks,  frameless  backpacks,  and  so  on. 


393 


Publishing  Data 


If  you  create  a  data  object  from  an  external  source — for  example,  from  a  Microsoft 
Access  database — and  then  update  or  change  the  external  source,  you  must 
republish  the  site  to  update  the  data.  For  example,  suppose  your  backpack  data 
object  referenced  50  records  originally  and  the  external  database  is  increased  with 
25  new  records.  After  you  republish  your  site,  the  data  object  references  75  records, 
the  backpack  data  list  contains  75  rows,  and  there  are  75  stacked  pages. 

After  you  create  a  data  list  on  a  page,  NetObjects  Fusion  generates  the  first  stacked 
page.  You  create  the  initial  Layout  of  how  all  stacked  pages  look  on  the  first  stacked 
page.  When  you  create  the  Layout  of  the  first  stacked  page,  the  remaining  stacked 
pages  automatically  inherit  the  same  Layout.  Changes  you  make  in  the  Layout  in 
any  one  stacked  page  affect  the  Layout  of  all  stacked  pages  in  that  set. 

The  following  illustration  shows  how  the  data  list  page  and  its  child  stacked  pages 
appear  in  Site  view. 

Home           Data  list  page 


Products        Stacked  pages 

J 


Publishing  Data 

In  general,  when  you  work  with  data  publishing,  you  follow  this  process: 

1.  Create  a  data  object. 

2.  Create  a  data  list. 

3.  Design  a  set  of  stacked  pages. 

When  you  create  a  data  list,  you  create  the  stacked  page  for  the  data  object.  On  this 
stacked  page  you  create  the  Layout  to  be  used  for  all  the  pages  in  the  stack, 
including  the  field  data  you  want  to  display  on  the  page. 

♦  If  you  are  storing  data  internally,  you  enter  the  field  data  on  the  stacked  page 
itself. 

♦  If  you  are  using  an  external  source,  the  field  data  is  drawn  from  the  external 
database,  spreadsheet,  or  ASCII  text  file. 
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When  you  use  the  Data  List  tool  in  Page  view,  you  can  perform  all  three  tasks  within 
the  Data  Publishing  dialog. 


Create  or  select  a  data  object 


Choose  options  for  the  data  list 


Choose  options  for  stacked  pages 

Click  OK  to  create  the  data  list  and 
stacked  pages 

Creating  a  Data  Object 

You  can  create  two  types  of  data  objects: 

♦  Internal  data  objects  reference  simple  text,  formatted  text,  and  picture  data  fields 
stored  or  placed  within  your  site. 

♦  External  data  objects  import  fields  from  a  data  field  created  in  a  program  other 
than  NetObjects  Fusion.  External  data  sources  include  external  databases, 
spreadsheets,  and  ASCII  text  files.  Importing  external  data  takes  a  single  table 
from  a  database  or  a  single  worksheet  from  a  program  such  as  Microsoft  Excel; 
it  does  not  import  the  entire  database.  Use  external  data  if  your  database  is 
maintained  by  others  who  do  not  use  NetObjects  Fusion,  if  you  have  large 
quantities  of  data,  or  if  the  data  is  frequently  updated. 

The  tools  for  creating  the  two  data  object  types  appear  on  the  Data  tools  flyout 
on  the  Advanced  toolbar.  Use  the  New  External  Data  Source  tool  to  create  a  data 
object  for  external  data;  use  the  Data  List  tool  to  create  a  data  object  for  internal 
data.  After  you  create  an  internal  data  object,  use  the  Data  Field  tool  to  add  data 
fields  to  the  stacked  pages. 
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S3    Ul  @J   Data  Field  tool  (only  available  on  stacked  pages) 


Data  List  tool 


New  External  Data  Source  tool 


m 


Data  List  tool 


1  h 


New  Asset 


Creating  a  Data  Object  for  Internal  Data 

Internal  data  is  records  and  fields  stored  within  your  site.  You  enter  internal  data 
directly  into  a  stacked  page  by  typing  text  or  numbers  and  by  placing  pictures. 

You  can  create  a  data  object  in  Page  view  or  in  Assets  view.  If  you  create  a  data 
object  in  Page  view,  you  can  immediately  create  stacked  pages  and  start  entering 
data.  If  you  create  a  data  object  in  Assets  view,  you  must  return  to  Page  view  to 
create  a  data  list  and  stacked  pages. 

To  create  a  new  internal  data  object: 
1 .   Display  the  Data  Object  dialog: 

♦  In  Page  view,  select  the  Data  List  tool  from  the  Advanced  toolbar,  and  draw 
a  rectangle  on  the  page.  In  the  Data  Publishing  dialog,  click  the  New  button. 

♦  If  you  are  in  Assets  view,  click  the  Data  Objects  tab  and  then  click  the  New 
Asset  button  on  the  control  bar. 
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2.  Select  Internal  and  enter  a  name  for  the  data  object  and  comments  about  it. 

NetObjects  Fusion  uses  the  data  object  name  in  the  list  of  data  objects  in  the 
Data  Publishing  dialog  and  in  Assets  view. 

3.  Click  the  plus  (+)  button  to  add  a  field.  Fields  define  the  kind  of  data  you  can 
enter. 


The  Data  Field  dialog  appears. 


4.   Type  the  field  name  and  select  a  data  type  for  the  field. 

♦  Formatted  text.  Characters  in  these  fields  can  be  formatted  individually. 
Formatted  text  fields  can  contain  paragraph  and  line  breaks,  and  can  exceed 
255  characters.  You  cannot  sort  on  formatted  text  fields. 

♦  Simple  text.  All  characters  in  these  fields  share  the  same  formatting 
characteristics.  Simple  text  fields  cannot  contain  paragraph  or  line  breaks, 
and  cannot  exceed  255  characters.  You  can  sort  on  simple  text  fields. 

♦  Image  file.  These  fields  can  contain  an  image  in  one  of  these  formats:  .bmp, 
.gif  (animated,  embedded,  interlaced),  jpg,  .pet,  .pcx,  .png,  .psd,  .tga,  or  .tif. 

You  can  sort  on  image  file  fields.  NetObjects  Fusion  uses  the  file  names  to 
sort  the  image  files. 


Note:  Carefully  plan  the  fields  you  define  within  an  internal  data  object.  After  you 
click  OK  in  the  Data  Object  dialog,  you  cannot  delete  the  field  from  the  data 
object  or  change  the  data  field  type. 

5.  Click  OK. 

6.  Repeat  steps  3,  4,  and  5  to  add  fields. 

7.  When  you  are  done,  click  OK  in  the  Data  Object  dialog. 
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The  data  object  is  now  an  asset  of  your  site,  and  you  can  continue  as  follows: 

♦  If  you're  working  in  Page  view,  the  Data  Publishing  dialog  is  still  open.  You  can 
select  fields  and  format  the  data  list  as  described  in  "Creating  a  Data  List"  on 
page  400,  and  lay  out  your  stacked  pages  as  described  in  "Creating  Stacked 
Pages"  on  page  403. 


♦  If  you're  in  Assets  view,  go  to  Page  view,  select  the  Data  List  tool  from  the 
Advanced  toolbar,  and  draw  a  rectangle  on  the  page.  In  the  Data  Publishing 
Data  List  tool  dialog,  select  the  newly  created  data  object  from  the  drop-down  list.  Select  fields 

and  format  the  data  list  as  described  in  "Creating  a  Data  List"  on  page  400,  and 
lay  out  your  stacked  pages  as  described  in  "Creating  Stacked  Pages"  on  page  403. 

Changing  an  Internal  Data  Field  Name 

1.  Go  to  Assets  view. 

2.  Click  the  Data  Objects  tab. 

3.  Double-click  the  data  object  name. 
The  Data  Object  dialog  appears. 

4.  In  the  Fields  list,  double-click  the  name  of  the  field  you  want  to  rename. 
The  Data  Field  dialog  appears. 

5.  Type  a  new  name  in  the  Name  field  and  click  OK. 

6.  Click  OK. 


Creating  a  Data  Object  for  External  Data 

External  data  exists  in  local  desktop  databases  or  in  ODBC  data  sources.  Open  Data 
Base  Connectivity  (ODBC)  drivers  draw  data  from  Structured  Query  Language  (SQL) 
data  sources,  such  as  Oracle  and  Sybase  data  files.  They  also  support  Microsoft 
Excel,  Microsoft  Access,  delimited  text  files,  and  others. 

NetObjects  Fusion  automatically  imports  all  the  fields  available  in  the  external 
database  file.  If  a  simple  text  field  contains  a  valid  path  to  an  image  file,  NetObjects 
Fusion  asks  if  you  want  to  make  the  field  an  image  field.  Before  you  add  an  external 
data  object,  make  sure  you  have  all  the  necessary  fields.  You  cannot  add  fields  once 
you  create  the  external  data  object. 
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New  External  Data 
Source  tool 


New  Asset 


Note:  NetObjects  Fusion  Connector  for  Macromedia  ColdFusion  and  NetObjects  Fusion 
Connector  for  Microsoft  Active  Server  Pages  support  dynamic  data  publishing.  Visit 
Online  view  for  information  about  these  connectors. 

To  create  a  data  object  from  a  SQL  data  source: 

1 .   Display  the  Select  Data  Source  dialog: 

♦  In  Page  view,  select  the  New  External  Data  Source  tool  from  the  Advanced 
Tools  toolbar,  and  draw  a  rectangle  on  the  page. 


♦  If  you  are  in  Assets  view,  click  the  Data  Objects  tab,  and  then  click  the  New 
Asset  button  on  the  control  bar.  The  Data  Object  dialog  appears.  Select 
External  and  then  click  the  Source  button. 

The  Select  Data  Source  dialog  appears. 

2.  You  can  select  an  existing  data  source  or  create  a  new  data  source. 

To  create  a  new  data  source,  click  New  in  the  Select  Data  Source  dialog  and 
follow  the  steps  in  the  Windows  Create  New  Data  Source  wizard. 

To  select  an  existing  ODBC  source  on  your  system,  you  can  use  the  File  Data 
Source  tab  or  the  Machine  Data  Source  tab: 

♦  File  Data  Source.  Select  from  the  list  of  data  sources  and  click  OK. 

♦  Machine  Data  Source.  Select  from  the  Data  Source  Name  list  and  click  OK. 

Depending  on  the  data  source  type  you  choose,  the  Select  Workbook  or  Select 
Database  dialog  appears. 

3.  Follow  these  steps: 

♦  Select  a  file  in  the  dialog  and  click  OK. 

♦  If  the  source  refers  to  a  multiple-file  database  or  a  spreadsheet  with  multiple 
tabs,  the  Select  dialog  appears.  Select  the  file  or  tab  and  click  OK. 

NetObjects  Fusion  creates  the  data  object,  gives  it  the  name  of  the  selected 
file  or  tab,  and  imports  its  fields  as  simple  text  fields. 

If  a  simple  text  field  contains  a  valid  path  to  an  image  file,  you  can  choose  to  make  it 
a  text  field  or  an  image  field. 
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The  data  object  is  now  an  asset  of  your  site,  and  you  can  continue  as  follows: 

♦  If  you're  working  in  Page  view,  the  Data  Publishing  dialog  is  still  open.  You  can 
select  fields  and  format  the  data  list  as  described  in  "Creating  a  Data  List"  on 
page  400,  and  lay  out  your  stacked  pages  as  described  in  "Creating  Stacked 
Pages"  on  page  403. 

♦  If  you're  in  Assets  view,  go  to  Page  view,  select  the  Data  List  tool  from  the 
Advanced  toolbar,  and  draw  a  rectangle  on  the  page.  In  the  Data  Publishing 
dialog,  select  the  newly  created  data  object  from  the  drop-down  list.  Select  fields 
and  format  the  data  list  as  described  in  "Creating  a  Data  List"  on  page  400,  and 
lay  out  your  stacked  pages  as  described  in  "Creating  Stacked  Pages"  on  page  403. 

Creating  a  Data  List 

Once  you  create  a  data  object,  you  can  create  a  data  list  on  any  page.  You  create  a 
data  list  and  a  set  of  stacked  pages  at  the  same  time.  NetObjects  Fusion 
automatically  includes  linked  data  list  icons  in  the  first  column  in  the  data  list.  The 
data  list  thus  acts  as  a  table  of  contents — each  row  contains  data  for,  and  is  linked 
to,  a  single  stacked  page. 

To  create  a  data  list: 

1.  In  Page  view,  display  the  page  on  which  you  want  to  place  the  data  list. 

2.  Select  the  Data  List  tool  from  the  Advanced  toolbar  and  draw  a  rectangle  in  the 
Layout  area. 


The  Data  Publishing  dialog  appears.  Select  the  data  object  you  want  to  use  for 
this  data  list. 
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The  fields  in  the  selected  data  object  are  listed. 
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Current  data  object 


Data  object: 

||S  ample 

Sort  by: 

|  Simple 

d 

Filter:  Set. 


Name:  |  Untitled 
Fields: 


■  Formatted 

□  Simple 

□  Image  File 

AddAII    |   Link/Unlink  I 


Fields  in  the  table  or 
worksheet  in  the  current 
data  object 


V  Display  all  fields 

|~~  Add  navigation  buttons  (next/previous/up) 


r  Stacked  pages 
I-  Display  all 

_ 


1 


3.  Choose  a  sort  field  from  the  drop-down  list.  For  internal  data  objects,  you  can 
only  sort  on  simple  text  or  image  fields. 

Records  are  sorted  in  ascending  order. 

4.  To  filter  the  data,  click  the  Set  button.  You  can  use  simple  text  fields  to  filter  the 
data. 

The  Filter  dialog  appears. 


Expression — 
Field: 

Comparison: 

Compare  to: 

|  Simple 

n 

|  begins  with 

d  1 

|and  2i 

[Simple 

d 

|  begins  with 

|and 

[Simple 

d 

|  begins  with 

d  | 
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By  default,  all  available  records  in  the  data  list  and  on  stacked  pages  appear.  You 
can  create  selection  criteria  that  isolate  the  records  you  want  in  your  data  list. 

5.  Enter  your  selection  criteria  and  click  OK. 

If  you  do  not  use  all  three  lines,  choose  end  from  the  drop-down  list  at  the  end 
of  the  last  line  you  use. 

6.  In  the  Data  list  area  of  the  Data  Publishing  dialog,  enter  a  name  for  the  data  list. 

7.  In  the  Fields  list,  select  fields  to  include  in  the  data  list  by  clicking  the  check 
boxes  to  the  left  of  the  fields. 

As  a  shortcut,  you  can  click  the  Add  All  button,  which  marks  all  fields  for 
display.  Typically,  however,  you  display  only  a  subset  of  fields  in  the  data  list 
and  display  all  fields  on  stacked  pages. 

8.  To  link  a  field  to  its  stacked  page,  select  the  field  in  the  Data  Publishing  dialog 
and  click  the  Link/Unlink  button. 

A  data  list  automatically  includes  a  navigation  button  that  links  to  the  record's 
stacked  page.  When  you  link  a  field,  site  visitors  can  click  either  the  button  or 
the  linked  field  to  jump  to  the  record's  stacked  page. 

9.  To  change  the  order  in  which  fields  appear  in  the  data  list,  click  a  field  and  then 
click  the  up  and  down  arrow  buttons. 

Continue  to  select  fields  and  click  the  up  and  down  arrow  buttons  until  the  list 
is  in  the  order  you  want. 

10.  Set  the  Stacked  Page  options: 

♦  Display  all  fields  places  all  fields  available  in  the  data  object  in  a  simple  layout 
when  NetObjects  Fusion  creates  the  first  stacked  page.  Use  this  shortcut  to 
avoid  placing  fields  individually  as  described  in  "Designing  the  Stacked  Page 
Layout"  on  page  404. 

♦  Add  navigation  buttons  creates  smart  links  to  navigation  buttons  (next/ 
previous/up)  when  NetObjects  Fusion  creates  the  first  stacked  page.  Use  this 
shortcut  so  you  don't  have  to  create  these  buttons  as  described  in  "Adding 
Navigation  Buttons  to  Stacked  Pages"  on  page  406. 

Note:  The  images  used  for  these  buttons — SPNavLeft.gif,  SPNavRight.gif,  and 
SPNavUp.gif — are  in  the  NetObjects  Fusion  7\NetObjects  System  folder. 

11.  Click  OK. 
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The  data  list  placeholder  appears.  Its  column  heads  are  the  names  of  the  fields 
you  selected  for  display,  and  a  data  list  button  appears  at  the  left  of  the  first  row. 
NetObjects  Fusion  populates  the  data  list  only  when  you  preview  or  publish  the 
page.  Data  never  appears  in  the  data  list  in  Page  view. 

Set  the  Data  List  properties. 


Email 
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Border:  \T~ 
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Adjust  the  settings  to  change  the  bullet  type,  background  color,  border  size, 
spacing  of  data,  and  column  title  display.  Drag  the  column  heading  borders  to 
adjust  column  width.  You  cannot  change  the  font  type  or  color  in  a  data  list 
except  by  editing  the  text  style.  See  "Working  with  Text  Styles"  on  page  156. 

When  you  are  satisfied  with  the  appearance  of  the  data  list,  create  a  layout  for 
the  stacked  pages  as  described  in  "Designing  the  Stacked  Page  Layout"  on 
page  404. 


Creating  Stacked  Pages 

Stacked  pages  correspond  to  records  in  a  database.  When  you  store  information 
internally  in  NetObjects  Fusion,  you  enter  data  for  one  record  on  each  stacked  page. 
If  you  are  drawing  information  from  an  external  data  file,  each  stacked  page 
automatically  displays  information  from  a  record. 


Note:  You  can  add  or  delete  stacked  pages  for  internal  data  as  described  in  "Adding  a  Stacked 
Page  for  Internal  Data"  on  page  407.  To  add  or  delete  records  for  external  data,  you 
must  make  the  changes  in  your  external  database  or  spreadsheet  and  then  republish 
the  site. 
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Designing  the  Stacked  Page  Layout 


o 

i 

Data  Field  tool 


The  stacked  page  Layout  determines  the  appearance  of  all  the  stacked  pages.  Data 
fields  and  non-data  objects  (text,  pictures,  or  other  assets)  added  to  the  stacked  page 
Layout  are  repeated  on  all  stacked  pages.  Layout  changes  you  make  to  any  stacked 
page  are  automatically  applied  to  all  pages  in  the  stack. 

If  you  did  not  select  any  stacked  page  options  when  you  created  your  data  list,  your 
stacked  page  Layout  is  blank.  You  can  add  text  and  graphic  objects  to  this  page,  just 
like  any  other  page.  The  key  items  to  be  added,  however,  are  the  data  fields  you 
defined  in  the  data  object. 

To  design  stacked  pages: 

1.  Go  to  Site  view  or  use  the  Site  Navigation  palette  in  Page  view  to  navigate  to  a 
stacked  page. 

If  you  are  working  with  external  data,  the  control  bar  indicates  this  is  1  of  as 
many  records  as  were  imported  from  the  external  source.  If  you  are  working 
with  an  internal  data  object,  it  indicates  this  is  0  of  0  because  you  have  not 
created  any  records. 

2.  In  Page  view,  select  the  Data  Field  tool  from  the  Advanced  toolbar,  and  draw  a 
rectangle  in  the  Layout  area  of  the  stacked  page.  The  dashed  rectangle  represents 
the  first  field  you  are  adding. 


Name 
Email 


Drawing  a  data  field 


Picture 
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The  Data  Field  dialog  appears.  The  fields  available  on  the  Name  drop-down  list 
are  in  the  data  object  you  selected  in  the  Data  Publishing  dialog  when  you 
created  the  stacked  pages. 


"NarviQ  """  l| 


3.  Select  a  field  and  click  OK. 

♦  If  you  are  using  external  data,  NetObjects  Fusion  displays  image  or  simple 
text  field  data  from  the  first  record  in  the  data  file. 

♦  If  you  are  using  internal  data  and  select  an  image  file  field,  the  field  area  is 
marked  with  an  X.  After  you  create  a  new  record,  you  can  double-click  the  X 
to  open  the  Picture  File  Open  dialog,  select  the  file,  and  then  click  OK. 

♦  If  you  are  using  internal  data  and  select  a  simple  or  formatted  internal  text 
field,  NetObjects  Fusion  displays  a  blank  field  if  you  have  at  least  one  record. 
If  there  are  no  records,  NetObjects  Fusion  displays  a  field  containing  the 
field  name.  Simple  text  fields  allow  only  one  line  of  information  and  all 
characters  use  the  same  formatting.  Formatted  text  fields  allow  multiple 
lines  of  information  and  individual  character  formatting.  See  "Adding  a 
Stacked  Page  for  Internal  Data"  on  page  407. 

4.  Drag  the  field  to  the  location  you  want  on  the  stacked  pages. 

5.  Place  additional  data  fields.  Add  text  blocks  to  label  your  fields,  lines,  and  other 
graphics  until  you  are  satisfied  with  the  Layout. 
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6.   Use  the  Data  Field  Properties  to  set  the  background  and  other  options  for  the 
current  data  field. 


Data  Field  Properties 


m  |o  ] 
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7.  Do  one  of  the  following: 

♦  If  you  are  using  external  data,  your  stacked  pages  are  already  created.  You 
can  use  the  Next  and  Previous  buttons  on  the  control  bar  to  scroll  though  all 
pages  in  the  stack. 

♦  If  you  are  using  internal  data,  add  records  as  described  in  "Adding  a  Stacked 
Page  for  Internal  Data"  on  page  407.  You  cannot  enter  data  until  you  add  a 
record  to  contain  it. 

Adding  Navigation  Buttons  to  Stacked  Pages 

Next  and  Previous  buttons  simplify  navigation  between  stacked  pages.  You  can 
automatically  add  navigation  buttons  when  creating  your  data  list  as  described  in 
"Creating  a  Data  List"  on  page  400,  or  you  can  create  custom  navigation  aids  by 
drawing  or  importing  buttons,  as  described  here. 

To  add  navigation  buttons  for  stacked  pages: 

1.  In  Page  view,  on  one  of  the  stacked  pages,  add  an  object  to  serve  as  a  button. 

You  can  place  text,  draw  a  button  using  the  Draw  tool,  or  import  an  image  using 
the  Picture  tool.  Visit  Online  view  to  learn  where  you  can  locate  a  variety  of 
images. 

2.  Select  the  object. 

3.  Click  Link  on  the  object's  Properties  palette. 
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4.  In  the  Link  dialog,  select  the  Smart  Link  type. 

5.  Select  Next  Stacked  Page  or  Previous  Stacked  Page,  and  then  click  Link. 

Adding  a  Stacked  Page  for  Internal  Data 

To  add  a  new  record  to  internal  data,  you  create  a  new  stacked  page.  Each  new 
stacked  page  has  the  same  layout  of  data  fields  and  non-data  objects  as  all  the  other 
pages  in  the  stack. 

You  can  create  as  many  new  stacked  pages  as  you  want.  For  each  new  stacked  page, 
NetObjects  Fusion  adds  a  row  to  the  data  list  on  the  data  list  page.  You  can  delete 
stacked  pages  for  internal  data  whenever  you  want. 


Note:  You  cannot  add  or  delete  stacked  pages  associated  with  an  external  data  object.  To  add 
or  delete  records  when  data  is  stored  externally,  you  must  update  your  external 
database  or  spreadsheet  application  and  re-publish  your  site. 

To  add  internal  data  stacked  pages: 

Z)  In  Page  view,  on  a  stacked  page,  click  the  plus  (+)  button  on  the  control  bar. 

— — ^1  A  stacked  page  with  blank  data  fields  appears.  The  counter  on  the  control  bar 

Add  indicates  the  new  total  of  records  in  the  stack. 

Deleting  a  Stacked  Page 

To  delete  the  current  stacked  page  of  an  internal  data  object: 

|  Z)  In  Page  view,  click  the  minus  (-)  button  on  the  control  bar  and  click  Yes  to 

confirm  deletion. 


Adding  Text  and  Images  to  Stacked  Pages 

When  a  stacked  page  displays  data  from  an  internal  data  object,  you  can  enter  text 
and  add  pictures  in  data  fields  on  the  stacked  page.  You  cannot  edit  text  on  stacked 
pages  that  reference  external  data. 

To  enter  text  in  a  text  data  field: 

Z)  Double-click  the  data  field. 

A  dotted  outline  with  hollow  handles  highlights  the  field,  and  an  insertion  point 
appears  inside.  Type  the  text  you  want,  then  click  outside  the  field  to  deselect  it. 
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To  add  an  image  in  an  image  file  data  field: 

Z>  Double-click  the  data  field  and  select  the  image  you  want  in  the  dialog  that 
appears. 

After  you  add  data  to  the  stacked  pages,  the  data  list  can  display  it.  Preview  the  data 
list  page  to  see  how  it  will  look  in  your  browser. 

Deleting  a  Data  Object 

If  you  created  stacked  pages  for  the  data  object,  you  must  delete  the  stacked  pages 
and  any  data  lists  before  you  can  delete  the  data  object. 

1.  Go  to  Site  view  and  select  the  stacked  pages. 

2.  Press  Delete,  and  click  Yes  to  confirm. 

3.  Switch  to  Page  view,  select  the  data  list,  and  press  Delete. 

4.  Switch  to  Assets  view. 

5.  Click  the  Data  Objects  tab. 

6.  Select  the  data  object  and  press  Delete. 

7.  Click  Yes  to  confirm  the  deletion. 

8.  Click  the  Files  tab. 

9.  Select  the  data  source  file  and  press  Delete. 

10.  Click  Yes  to  confirm  the  deletion. 
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Working  with  HTML  Directly 

In  addition  to  adding  content,  links,  and  DHTML  actions  to  your  site  using 
NetObjects  Fusion  tools,  you  can  work  directly  with  the  code  to  insert  HTML  and 
scripts.  For  example,  you  can  add  META  tags  to  index  your  site  for  search  engines, 
power  content  with  JavaScript  or  Visual  Basic  routines,  center  pages  throughout 
your  site,  or  do  whatever  else  you  can  when  coding  raw  HTML.  You  can't  edit  the 
HTML  that  NetObjects  Fusion  automatically  generates,  but  you  can  add  your  own 
code  virtually  anywhere. 

Before  working  with  HTML  directly,  you  should  be  familiar  with  HTML  tags  and 
page  structure.  If  you're  not  familiar  with  HTML,  you  can  still  complete  the  tasks  in 
"Examples  of  Page  and  AutoFrame  HTML"  on  page  418  and  "Examples  of  Object 
HTML"  on  page  424. 

You  can  also  insert  code  within  link  tags  and  add  your  own  actions.  See  "Adding 
HTML  to  a  Link"  on  page  285  and  "Customizing  Default  Actions"  on  page  339. 


Note:  NetObjects  Fusion  doesn't  verify  HTML  you  add,  so  be  sure  to  use  valid  syntax, 
enclosing  scripts  within  <SCRIPT>  and  </SCRIPT>  tags,  and  so  on.  Also,  assets 
referenced  in  your  HTML  aren't  managed  in  Assets  view.  If  you  move  the  HTML  or  its 
assets  in  your  directory  structure,  edit  paths  in  the  HTML  accordingly. 

This  chapter  tells  you  how  to  add  HTML  or  scripts  by: 

♦  Editing  the  page's  HTML 

♦  Accessing  an  AutoFrame's  HTML 

♦  Accessing  an  object's  HTML 

♦  Inserting  HTML  in  a  text  box 

♦  Coding  your  own  objects 

♦  Coding  your  own  frames 
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Editing  the  Page's  HTML 

You  can  add  HTML  or  script  to  the  HTML  NetObjects  Fusion  generates  in  HTML 
Source  view  or  in  the  Page  HTML  dialog.  Using  the  Page  HTML  dialog,  you  can 
add  or  edit  the  page's  code  between  <HEAD>  tags,  inside  the  <BODY>  tag,  and  at 
the  beginning  of  the  <BODY>  tag.  For  more  control  over  where  you  insert  HTML 
code,  use  the  NetObjects  Fusion  internal  HTML  editor  in  HTML  Source  view. 

HTML  Source  view  displays  all  of  the  page's  HTML  code  in  one  place,  which  makes 
it  easier  to  insert  and  edit  code.  You  can  also  use  the  Find,  Cut,  Copy,  and  Paste 
commands  in  this  view.  Code  that  you  can  edit  appears  on  a  white  background.  You 
cannot  edit  code  that  appears  on  a  gray  background. 

Working  in  HTML  Source  View 

HTML  Source  view  combines  advanced  HTML  editing  features,  such  as  color 
syntax  highlighting  and  language  element  insertion,  with  familiar  word  processing 
features,  including  drag  and  drop,  text  editing,  and  text  search. 

In  NetObjects  Fusion,  HTML  code  is  either  protected  or  unprotected.  Protected 
code  is  the  HTML  that  NetObjects  Fusion  generates  when  you  publish  your  site. 
You  cannot  edit  this  code.  Unprotected  code  is  the  code  you  insert.  You  can  edit 
unprotected  HTML  code  in  Source  view. 

In  HTML  Source  view  you  can: 

♦  Copy  protected  blocks  of  generated  HTML  and  paste  them  in  unprotected 
areas,  but  you  cannot  modify  or  delete  them. 

♦  Drag  and  drop  unprotected  blocks  of  HTML. 

♦  Go  to  a  specific  place  in  the  code  using  the  Find  command. 

♦  Add  code  between  objects  inside  the  <BODY>  and  </BODY>  tags. 

♦  Add  HTML  code  at  various  insertion  points  outside  the  <BODY>  and 
</BODY>  tags. 

♦  Insert  a  field  such  as  the  date  and  time  the  site  was  created  or  last  modified. 
NetObjects  Fusion  includes  several  fields  you  can  use  and  you  can  also  define 
your  own. 

♦  Insert  an  HTML,  script,  or  other  text  file  in  an  unprotected  area. 

♦  Undo,  redo,  copy,  cut,  and  paste  unprotected  code. 
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♦  View  and  add  frames  in  a  frameset. 

♦  Set  and  change  many  HTML  options  such  as  formatting,  whether  to  include 
HTML  comments  in  your  published  code,  and  so  on.  See  "Setting  HTML 
Options"  on  page  451. 

In  HTML  Source  view  you  cannot: 

♦  Edit  code  generated  by  NetObjects  Fusion. 

♦  Insert  code  inside: 

-v-  text  generated  by  NetObjects  Fusion. 
❖  the  <BODY>  tag. 

♦  Insert  code  across  a  range  of  pages. 

Use  the  Page  HTML,  Link  HTML,  or  Object  HTML  dialog  to  insert  code  in  those 
areas.  See  "Using  the  Page  HTML  Dialog"  on  page  415,  "Adding  HTML  to  a  Link" 
on  page  285,  and  "Accessing  an  Object's  HTML"  on  page  422. 

Exploring  HTML  Source  View 

To  go  to  HTML  Source  view: 
Z)  In  Page  view,  click  the  HTML  Source  tab. 
HTML  Source  view  appears. 


Document  Map 
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Source  view  is  divided  into  the  Document  Map  pane  on  the  left  and  the  HTML 
Source  Editor  pane  on  the  right.  You  can  resize  the  panes  by  dragging  the  divider 
bar. 

The  Document  Map  displays  the  hierarchy  of  HTML  components  and  language 
elements  on  the  current  page.  It  provides  you  with  quick  access  to  code  for 
NetObjects  Fusion  objects. 

♦  To  expand  a  tag's  code  in  the  Document  Map,  click  the  plus  sign. 

♦  To  collapse  a  tag's  code,  click  the  minus  sign  or  right-click  and  choose  Collapse 
Item  from  the  shortcut  menu.  To  collapse  all  tags,  choose  Collapse  Map  from 
the  shortcut  menu. 

♦  Double-click  a  tag  to  highlight  the  corresponding  code  in  the  HTML  Source 
Editor. 

♦  To  hide  the  Document  Map,  choose  Hide  from  the  shortcut  menu.  To  restore 
the  Document  Map  display,  choose  Document  Map  from  the  HTML  Source 
Editor's  shortcut  menu. 

The  HTML  Source  Editor  displays  the  source  code  for  the  current  page. 

♦  Protected  code  is  displayed  on  a  gray  background.  You  cannot  edit  this  code. 

♦  Unprotected  code  is  displayed  on  a  white  background.  You  can  edit  this  code  or 
add  code  anywhere  there  is  a  white  background. 

♦  Language  elements  are  differentiated  by  text  color: 

0-  Blue:  HTML  tag 

■v-  Green:  HTML  attribute  names 

■v-  Maroon:  HTML  attribute  values 

■v-  Black:  Text  that  appears  on  the  page 

•0-  Gold:  HTML  and  SCRIPT  comments 

0-  Purple:  SCRIPT  tags 

•0-  Teal:  SCRIPT  tags 

0-  Red:  Unknown  tags 

♦  SCRIPT  keywords  appear  in  bold  text. 

♦  If  the  page  contains  frames,  a  tab  for  each  frame  appears  at  the  bottom  of  the 
HTML  Source  Editor.  See  "Working  in  the  HTML  Source  Editor"  on  page  417. 
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♦  Blocks  of  code  can  be  expanded  and  collapsed  by  clicking  its  plus  or  minus  sign 
respectively. 

Adding  and  Editing  HTML  and  Scripts  in  HTML  Source  View 

1 .  In  Page  view,  click  the  HTML  Source  tab. 

2.  Edit  the  source  code  as  necessary.  You  can: 

♦  Add  or  edit  code  anywhere  there  is  a  white  background. 

♦  Copy  blocks  of  protected  code  and  paste  them  in  unprotected  areas. 

♦  Drag  and  drop  unprotected  blocks  of  code.  See  "Moving  Text  Using  Drag 
and  Drop"  on  page  414. 

♦  Insert  the  contents  of  an  HTML,  script,  or  other  text  file. 

♦  Insert  fields  such  as  the  date  and  time. 

3.  To  save  your  edits,  from  the  File  menu,  choose  Save  Site.  If  you  switch  to 
another  view  before  saving  your  changes,  the  Save  Files  dialog  appears. 

4.  When  you  switch  to  another  view,  the  Save  Files  dialog  appears. 


Save  Files  ["H 

The  following  files  have  been  edited.  Check  the  files  you  wish  to  save. 

* 

Left_Frame 

0  Body_Frarne 
0  Frameset_Page 

Save  Cancel 

5.   Select  each  file  and  frame  you  want  to  save,  and  click  Save.  Click  Cancel  to  undo 
all  changes  you  made  in  HTML  Source  view  since  the  last  save. 
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Moving  Text  Using  Drag  and  Drop 

You  cannot  drag  and  drop  protected  code;  you  can  only  do  this  with  your  own 
code. 

To  select  a  block  of  text: 

1.  Move  the  pointer  into  the  selected  block  and  hold  down  the  mouse  button.  A 
rectangle  appears  under  the  tail  of  the  pointer,  indicating  that  the  text  can  be 
moved. 

2.  Without  releasing  the  mouse  button,  move  the  pointer  to  the  text  block's  new 
location,  indicated  by  the  blinking  text  insertion  point. 

3.  Release  the  mouse  button  to  complete  moving  the  text  block. 

Finding  Text 

In  the  HTML  Source  Editor,  as  in  a  word  processor,  you  can  search  for  text  in  the 
current  document. 

To  find  text: 

1 .  View  the  source  code  for  the  page  you  want  to  search. 

2.  From  the  Edit  menu,  choose  Find. 
The  Find  dialog  appears. 

3.  In  the  Find  what  field,  type  the  word,  letters,  or  phrase  you  want  to  find  and 
select  options  to  narrow  the  search. 

4.  Click  Find  Next. 

NetObjects  Fusion  highlights  the  text  you  are  searching  for. 

Note:  You  can  only  search  all  the  code  on  a  page.  If  you  select  some  code  and  then  search,  the 
HTML  Source  Editor  begins  searching  the  code  that  occurs  after  the  selection. 

Inserting  a  File 

You  can  insert  the  contents  of  an  HTML,  script,  or  other  text  file. 

1.  Click  in  a  white  area  in  the  HTML  Source  Editor. 

2.  Choose  Insert  File  from  the  Text  menu. 

3.  In  the  Open  dialog,  select  a  file  to  insert. 
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4.   Click  Open. 

Inserting  a  Field 

You  can  insert  fields  that  contain  variable  text  such  as  the  date  and  time  the  site  was 
created  or  last  modified,  the  site  name  and  author,  and  so  on.  NetObjects  Fusion 
includes  several  fields  you  can  use;  you  can  also  define  your  own.  To  insert  a  field 
into  your  source  code,  choose  Insert  Field  from  the  Text  menu.  See  "Creating  and 
Editing  Fields"  on  page  170  for  details  on  inserting  fields. 

To  use  the  author  META  tag,  you  must  specify  the  name  of  the  author  in  the 
Current  Site  Options  dialog.  See  "Entering  META  Tags"  on  page  49. 

Using  the  Page  HTML  Dialog 

In  Page  View,  select  the  area  of  the  page  you  want  to  access — the  Layout  area  to 
access  the  current  page's  HTML,  or  a  MasterBorder  to  access  the  HTML  of  several 
pages.  Then  use  the  Page  HTML  dialog  to  add  code  between  the  <HEAD>  tags, 
inside  the  <BODY>  tag,  or  at  the  beginning  of  the  <BODY>. 

To  find  out  how  to  add  HTML  or  script  to  pages  that  use  AutoFrames,  see 
"Accessing  an  AutoFrames  HTML"  on  page  416. 

1.  In  Page  Design  view,  click  in  an  empty  spot  in  the  Layout  area  or  MasterBorder. 
To  select  a  ZeroMargins  MasterBorder,  click  outside  the  page. 

2.  Click  the  HTML  button  on  the  Properties  palette. 
The  Page  HTML  dialog  appears. 

Click  a  tab  to  indicate  where  in  the  HTML  you  want  to  add  tags  or  script.  Unlike 
the  HTML  Source  view,  this  dialog  only  lets  you  enter  your  HTML  or  script 
code  into  one  of  three  locations. 

♦  Between  Head  Tags.  Adds  code  to  the  <HEAD>  content,  inserting  it  just 
before  the  </HEAD>  tag. 

♦  Inside  Body  Tag.  Adds  code  inside  the  <BODY>  tag,  as  in 
<BODYattribute=value>,  where  attribute=value  is  your  code. 

♦  Beginning  of  Body.  Adds  code  just  below  the  <BODY>  tag. 

3.  Enter  your  code  on  the  tab. 

Your  typing  also  appears  in  blue  in  the  dialog's  gray  area,  where  you  can  preview 
its  location  in  the  HTML  that  gets  generated. 
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Note:  To  enter  a  tab  character  as  part  of  the  HTML,  press  Shift+Ctrl+Tab. 


To  add  HTML  or  script 
between  the  <HEAD> 
and  </HEAD>... 


...inside  the  <BODY> 
tag  itself... 


...or  to  the  page's 
content,  just  below 
the  <BODY>  tag  — 


Generated  HTML: 


£HTHI> 
<  HEAD  > 

<TITLE>  Title  of  Page  will  be  generated  by  NetObjects 
Fusion  < /TITLE} 
<META  NAME= "DESCRIPTION"  CONTENT = " Large  selection  of 
valuable,   high  quality  antiques  and  collectibles  for  any 
budget " > 

<META  NAME= "KEYWORDS"  CONTENT- "antiques,   quality  antiques, 

valuable  antiques,   low— cost  antiques,  collectibles, 

jewelry,    furniture,   novelties" > 

<! —  NetObjects  Fusion  Generated  HEAD  HTML — > 

( /HEAD  > 


i  Head  Tags  j  inside  Body  Tag  |  Beginning  of  Body  | 


|<MET4  NAME=  "DES^IPTION'^CONTENT  =  "  Large  selection  of 
valuable,   high/qual i ty/ant iques  and  collectibles  for  any 
budget " > 

<META  NAME^"  KEYWORD^"  CONTENT = "antiques,  quality  antiques, 
valuableyentiques/ low-cost  antiques,   collectibles,  jewelry, 
±UXXii_Lu/E ,  noveVties" 


Click  to  insert  contents 
of  an  HTML,  script,  or 
other  text  file 

Click  to  insert  a  field 


Preview  your  code  in 
placeholder  HTML  that 
NetObjects  Fusion 
generates 


Type  or  paste  your 
HTML  or  script  on  the 
tab 


You  can  click  the  Insert  File  button  to  insert  contents  of  an  HTML,  script,  or 
other  text  file.  Click  the  Insert  Field  button  to  insert  a  field.  See  "Managing 
Variables"  on  page  443. 

4.   Click  OK. 

Preview  the  site  to  test  your  code,  and  view  the  source  from  your  browser  to  see  the 
resulting  HTML.  To  edit  your  code,  open  the  Page  HTML  dialog  again,  click  the  tab 
containing  the  code,  and  make  your  changes. 

Accessing  an  AutoFrame's  HTML 

If  your  site  uses  AutoFrames,  you  can  add  HTML  or  script  to  the  frameset  file  that 
gets  generated,  for  example,  to  include  a  <NOFRAMES>  tag  for  browsers  that  don't 
support  frames  or  to  modify  the  size  or  layout  of  your  frames.  You  can  also  add 
code  to  any  content  page  the  frames  display,  for  example,  to  center  the  frame's 
contents. 
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Working  in  the  Page  HTML  Dialog 

In  Page  view: 

♦  To  access  the  frameset's  HTML,  click  in  the  MasterBorder  or  AutoFrame,  then 
click  the  HTML  button  on  the  General  tab  of  the  Properties  palette.  Or  right- 
click  in  the  MasterBorder  or  AutoFrame,  and  choose  Master  HTML  from  the 
shortcut  menu.  The  code  is  applied  to  the  frameset  instead  of  across  a  range  of 
pages. 

♦  To  add  code  to  a  frame's  HTML  page,  click  the  AutoFrame  label  and  then  click 
the  HTML  button  on  the  Frame  Properties  palette.  Or  right-click  in  the 
AutoFrame,  and  choose  Frame  HTML  from  the  shortcut  menu. 

In  each  case,  the  Page  HTML  dialog  appears,  where  you  can  add  code  between  the 
<HEAD>  tags,  inside  the  <BODY>  tag,  or  at  the  beginning  of  the  <BODY>,  as 
described  in  "Editing  the  Page's  HTML"  on  page  410. 


Note:  If  you  remove  the  AutoFrame  from  a  MasterBorder,  code  added  to  the  frame's  content 
HTML  is  deleted. 

Working  in  the  HTML  Source  Editor 

You  can  also  add  or  edit  a  frameset  in  the  HTML  Source  Editor.  When  a  page 
contains  frames,  tabs  appear  at  the  bottom  of  the  HTML  Source  Editor,  one  for 
each  frame  in  the  frameset,  one  for  the  page  Layout  (the  Body  frame),  and  one  for 
the  frameset. 

The  names  of  frames  are  assigned  by  default  when  you  choose  a  frame  on  the 
AutoFrames  tab  of  the  MasterBorder  Properties  palette.  The  frame  names  display  as 
framename_pagename.html  for  all  frames  that  must  change  from  page  to  page  and  as 
framename_masterbordername  for  all  frames  that  do  not  change. 

The  default  names  are  Left  Frame,  Right  Frame,  Top  Frame,  and  Bottom  Frame, 

depending  on  which  type  of  frame  you  selected.  Additionally,  there  are  two  other 
tabs:  Body  Frame  and  Frameset  Page.  The  Body  Frame  tab  displays  the  code  for  the 
page  Layout.  The  Frameset  Page  tab  specifies  information  about  the  frameset  such 
as  the  names  and  attributes  for  each  frame  in  the  frameset  and  META  tags  for  the 
page. 
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: i  Fj°f  Ro"ova 

:  <<•  ;!D0CTYPE  HTML  PUBLIC  "-, 

-  Q  <HTML; 
B-Q  (HEAD> 

<™  <MEiA)  Generator 

I  m  <TITLE> 

<)>  <BASE) 
S  <SCRIPT> 
L-S  <SCRIPT> 
B-i  (BODY? 
□  <ll 


tion  F_loa  IRollov. 


|  function  FjSoiiO-ili 


□  ..d,F,„.    □  4,m.,tP,, 


To  edit  a  frame: 

1 .  Click  the  HTML  Source  tab  in  Page  view. 

2.  Click  the  tab  with  the  name  of  the  frame  you  want  to  edit.  See  "Editing  the 
Page's  HTML"  on  page  410. 

Examples  of  Page  and  AutoFrame  HTML 

Indexing  Pages  for  Search  Engines 

To  give  your  content  the  best  chance  of  being  found  and  ranked  by  search  engines 
like  AltaVista,  you  can  add  META  tag  descriptions  and  keywords  to  your  pages' 
<HEAD>  content.  Site  visitors  don't  see  this  information,  but  search  engines 
require  it  to  index  your  site. 


Note:  Search  engines  index  frameset  files,  so  if  your  site  uses  AutoFrames  or  scripted  frames, 
be  sure  to  access  Master  HTML  so  your  tags  are  added  to  the  frameset  file. 

1.  In  Page  view,  click  in  the  Layout  area  of  the  page  you  want  indexed,  or  in  the 
MasterBorder  or  AutoFrame  to  index  a  set  of  pages. 

2.  Click  the  HTML  button  on  the  General  tab  of  the  Properties  palette. 
The  Page  HTML  dialog  appears. 
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3.  Click  the  Between  Head  Tags  tab  and  enter  META  tags  that  describe  your 
content.  For  example,  type: 

<META  NAME="DESCRIPTION"  CONTENT="/.orge  selection  of  valuable,  high  quality 
antiques  and  collectibles  for  any  budget."> 

where  the  content  is  a  one-sentence  description  containing  the  most  important 
keywords  site  visitors  might  search  for.  Then  type: 

<META  NAME="KEYWORDS"  COHTEHT=" antiques,  quality  antiques,  valuable  antiques, 
low-cost  antiques,  collectibles,  jewelry,  furniture,  novelties"> 

where  the  content  lists  all  important  keywords. 

Note:  You  can  also  enter  META  keywords  in  the  Current  Site  Options  dialog. 
See"Entering  META  Tags"  on  page  49. 

4.  Click  OK. 

5.  Register  your  site  with  search  engines. 

You  must  do  this  separately  with  each  search  engine  for  it  to  find  your  site.  Visit 
AltaVista,  Excite,  Lycos,  Yahoo,  and  so  on,  for  information.  Search  engines 
continually  evolve  how  they  use  content  to  index  and  rank  pages,  and  many  of 
them  make  this  information  available  at  their  sites.  Visit  Online  view  for 
registration  information. 

To  see  the  resulting  HTML,  publish  the  site  and  view  the  source  in  your  browser.  To 
test  the  tags  you  added,  publish  the  site  and  search  for  keywords  using  the  various 
search  engines.  Be  patient,  as  it  can  take  days  or  weeks  for  indexers  to  find  your  site. 

Auto-Forwarding  from  a  Transition  Page 

You  can  create  a  transition  page  that  appears  for  a  few  seconds,  for  example,  to 
display  a  product  logo,  and  then  forwards  site  visitors  automatically  to  another 
page.  You  do  this  by  inserting  a  META  tag  in  the  page's  <HEAD>. 

1 .  In  Page  view,  click  in  the  Layout  area  of  the  transition  page,  and  click  the  HTML 
button  on  the  Layout  Properties  palette. 

The  Page  HTML  dialog  appears. 

2.  Click  the  Between  Head  Tags  tab  and  type: 

<META  HTTP-EQUIV="REFRESH"  CONTENT="seconds;  m\=http://server.domain.com/ 
page.html"> 
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where  seconds  is  the  number  of  seconds  you  want  the  transition  page  to  appear, 
and  http://server.domain.com/page.html  is  the  URL  of  the  page  you  want  to  link  to. 

3.   Click  OK. 

Preview  the  site  to  test  the  transition,  and  go  to  HTML  Source  view  to  see  your 
code. 

Accommodating  Browsers  that  Don't  Support  Frames 

Some  older  browsers  don't  support  frames.  To  prevent  site  visitors  using  these 
browsers  from  being  greeted  with  a  blank  page  or  error  message  when  they  access 
your  site,  add  alternate  content  for  them  using  the  HTML  <NOFRAMES>  tag. 

You  add  the  <NOFRAMES>  tag  and  your  alternate  content  to  the  frameset  file 
generated  when  you  publish.  Your  content  can  include  text,  pictures,  and  links, 
using  standard  HTML  tags. 

1.  In  Page  view,  right-click  in  the  MasterBorder  and  choose  Master  HTML. 
The  Page  HTML  dialog  appears. 

2.  Click  the  Beginning  of  Body  tab  and  enter: 
<NOFRAMES> 

<H  1  >Thanks  for  visiting  oursite!</H  1  > 

We're  sorry  you  haven't  had  a  chance  to  upgrade  your  browser  yet  and  can't  see  our 
framed  site.  We  think  the  frames  make  it  easier  to  find  what  you  want. 

<P>lfyou  want  to  obtain  a  more  current  browser,  check  out  either  Microsoft's  <A 
HREF ="http://www.microsoft.com">lnternetExplorer</h>  or  Netscape's  <A 
H  REF="hf  tp://www.netscape.com">Navigat or  or  Communicators 'A>  products1. 

</NOFRAMES> 

3.  Click  OK  to  close  the  dialog. 
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A  site  visitor  with  a  browser  that  supports  frames  sees  the  framed  site  as  you 
designed  it.  A  site  visitor  with  an  older  browser  sees  the  following: 


tile    tdii    Options    Navigate  Hofeis 


Corporate  -  NCSA  M 


&  a  m 


MR  +© 


j      [      j|file./;/E|;Fusi«i  /'Usei  SKes/M.iJt 


T3 


Thanks  for  visiting  our  site ! 

We're,  sorry  you  haven't:  had  chance  to  upgrade  ycaur  browser  yet,  and  can't  see  our 
ironed  site.  We  think  the  frames  make  !L  saner  to  End  what  you  want. 

If  you  want  to  obtain  a  more  current  browser,  check  out  either  Microsoft's  Internet 
or  Netscape's  products! 


Creating  a  Default  Target  Frame 

If  you  code  your  own  frames,  and  one  content  page  contains  a  lot  of  links  that  target 
the  same  frame,  you  can  make  that  frame  the  default  target.  That  way  you  don't 
have  to  choose  a  target  attribute  for  each  link.  The  default  target  for  the  contents  of 
a  frame  that  displays  navigational  buttons,  for  example,  might  be  a  frame  that 
displays  the  primary  content  those  buttons  point  to.  Unless  you  add  a  target 
attribute  specifying  differently,  all  links  on  that  page  display  their  contents  in  the 
default  frame. 

1.  In  Page  view,  open  the  content  page  to  be  targeted. 

2.  Click  the  HTML  button  on  the  Layout  Properties  palette. 
The  Page  HTML  dialog  appears. 

3.  Select  the  Between  Head  Tags  tab  and  enter: 
<base  target="framename"> 

where  framename  is  the  name  of  the  frame  as  defined  in  the  frameset  file  that  you 
want  to  be  the  default  target. 

4.  Click  OK  to  close  the  Page  HTML  dialog. 
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Create  several  links  on  the  content  page  using  the  Link  dialog.  Don't  add  any 
HTML  specifying  a  target  frame.  Preview  the  site  and  test  the  links.  They  should  all 
display  contents  in  the  default  target  frame. 

Accessing  an  Object's  HTML 

You  can  add  HTML  or  script  to  pictures,  media,  a  text  box,  or  any  other  object,  to 
modify  or  control  that  object.  You  can  enclose  the  object  in  HTML  tags,  or  add 
HTML  or  script  inside  the  object's  tag. 

You  can  add  code  before  and  after  a  text  box's  HTML  as  described  here.  To  insert 
code  inside  a  text  box,  see  "Inserting  HTML  in  a  Text  Box"  on  page  425. 

1.  In  Page  view,  select  the  object  you  want  to  add  code  to,  and  click  the  HTML 
button  on  the  Properties  palette.  Or  from  the  Object  menu,  choose  HTML. 

The  Object  HTML  dialog  appears. 

2.  Click  the  tab  to  indicate  where  you  want  to  insert  HTML  or  script. 

♦  Before  Tag.  Adds  code  just  before  the  object's  tag,  as  in  your_code  <IMG  SRC=>, 

if  the  object  is  a  picture. 

♦  Inside  Tag.  Adds  code  inside  the  object's  tag,  as  in  <IMG  SRC=" lmage.gif " 
attribute>,  where  attribute  is  your  code.  This  tab  appears  only  if  you  can  add 
something  inside  the  object's  tag. 

♦  After  Tag.  Adds  code  just  after  the  object's  tag;  for  example,  to  insert  a  closing 
HTML  tag  for  any  opening  tag  inserted  before  the  object. 

3.  Enter  your  code  on  the  tab. 

Your  typing  also  appears,  shown  in  blue,  in  the  dialog's  gray  area,  where  you  can 
preview  its  location  in  the  object's  HTML. 
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To  add  HTML  or  - 
script  before  the 
object's  HTML  tag 

To  add  code  inside 
the  object's  tag 

To  insert  a  closing 
HTML  tag  for  any 
opening  tag  inserted 
before  the  object 


Generated  HTML: 


Insert  Field...         Insert  File...  | 


oiiClick  = " alert ( 1  To  build  your  site  with  NetObjects  FusiorT 
visit  wwTT.netobjeots.com  today.    )"<IMf;  ID=  " Piotur e3 "  HEIGHT= 
Zl  WIDTH=69  SRC=" file: ///C: /NetObjects  Fusion 
7/Components/SiteMapper/SiteiLiapper  .  gif  "  EOEDER=0  ALT=  "  " 


-  Before  Tag  |  Inside  Tag  |  After  Tag  | 


Click  to  insert  contents  of 
an  HTML,  script,  or  other 
text  file 

Click  to  insert  a  field 

See  the  object's  HTML, 
and  preview  your  code 
as  you  type 


Type  or  paste  your  HTML 
or  script  in  thispartofthe 
dialog 


© 

HTML  indicator  icon 


4. 


You  can  click  the  Insert  File  button  to  insert  contents  of  an  HTML,  script,  or 
other  text  file.  Click  the  Insert  Field  button  to  insert  a  field.  See  "Managing 
Variables"  on  page  443. 

Click  OK. 

The  object  is  marked  with  an  HTML  icon. 


Preview  the  site  to  test  your  code,  and  view  the  source  from  your  browser  to  see  the 
resulting  HTML.  To  edit  the  code,  open  the  Object  HTML  dialog  again,  click  the 
tab  containing  your  code,  and  make  changes. 
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Examples  of  Object  HTML 


Displaying  a  Message  on  Mouse  Click 


You  can  display  a  message  when  site  visitors  click  an  image  or  text  link.  One  way  to 
do  this  is  by  creating  a  Blank  link  and  inserting  an  onClick  JavaScript  in  the  link's 
opening  <A  HREF>  tag. 

Note:  You  cannot  add  or  edit  HTML  for  links  in  HTML  Source  view.  You  can  only  do  this  in  the 
Link  HTML  dialog. 

1 .  In  Page  view,  select  the  image  or  exact  text  site  visitors  are  to  click,  and  click  the 
Link  button  on  the  Properties  palette. 

The  Link  dialog  appears. 

2.  Select  Smart  Link  from  the  Link  type  drop-down  list  and  select  Blank  in  the 
Name  column. 

3.  Click  the  HTML  button  in  the  Link  dialog. 
The  Link  HTML  dialog  appears. 

4.  Click  the  Inside  Link  tab  and  type: 
onClick="alert('yoor  message')" 

where  your  message  is  the  text  of  your  message. 

5.  Click  OK  in  the  Link  HTML  dialog,  then  click  Link  in  the  Link  dialog. 
Preview  the  page  and  click  the  image  or  text  to  see  the  message. 


appears  when  site 
visitors  dick  the  link 


View  the  HTML  source  in  HTML  Source  view  to  see  the  resulting  HTML. 

Another  way  to  add  this  JavaScript  to  a  picture  or  text  link  is  to  create  a  custom  link. 
In  the  Link  dialog,  select  External  Link  as  the  Link  type,  choose  javascript  from  the 
New  link  drop-down  list,  and  type  the  onClick  script  in  the  New  link  field. 


□ 


Message  that 
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Inserting  HTML  in  a  Text  Box 


You  can  insert  HTML  or  script  inside  the  contents  of  a  text  box  at  the  insertion 
point,  for  example,  to  add  text  attributes  or  comments  to  the  HTML.  Note  that  you 
cannot  do  this  in  HTML  Source  view. 

1.  In  Page  view,  double-click  in  the  text  box  to  get  an  insertion  point. 

2.  From  the  Text  menu,  choose  Insert  HTML. 
The  Insert  HTML  dialog  appears. 

3.  Enter  your  HTML  or  script. 


:/STR0NO 


-U2<l 


What  you  type  or  paste  here... 


m  ;  jq    ;  □      ...is  inserted  where 

□For  SPECIAL  DEALS!  click  here  "□     you  clicked  m  the 

□" fry Q      text  box,  in  the 

>  published  HTML 

For  <STRONG>SPECIAL  DEALS</STRONG>,  click  here 


Note:  The  Insert  HTML  dialog  can  contain  up  to  255  characters.  To  insert  more  than 
255  characters,  use  the  HTML  Source  Editor  or  Object  HTML  dialog  or 
reference  an  external  HTML  file. 


Marks  HTML  inserted  in 
a  text  box 


4.   Click  OK. 

Preview  the  page  to  test  your  code,  and  view  the  source  from  your  browser  to  see 
the  resulting  HTML. 


ForrSPECIAL  DEALS,  click  here 


You  can  double-click  here  to  reopen  the 
Insert  HTML  dialog  to  view  or  edit  the  code 
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Coding  Your  Own  Objects 

You  can  create  an  object,  such  as  a  Java  applet  or  a  table  you  want  to  code  yourself, 
by  entering  HTML  or  script  in  an  empty  text  box. 

1.  In  Page  view,  draw  a  text  box  where  you  want  the  object  to  go. 

The  box  marks  the  object's  position  when  you  publish,  but  it  can  grow  vertically 
or  horizontally  depending  on  the  object.  To  approximate  the  published  size  in 
your  Layout  area,  select  Lock  height  on  the  Text  Box  tab  of  the  Text  Properties 
palette. 

2.  Right-click  in  the  text  box  and  choose  Object  HTML  from  the  shortcut  menu. 
The  Object  HTML  dialog  appears. 

3.  On  the  Before  Tag  tab,  type,  paste,  or  insert  the  HTML  or  script. 

4.  Press  Enter  after  the  script  and  type  <!-- 

5.  On  the  After  Tag  tab,  type  --> 

6.  Click  OK. 

You  defined  a  space  on  the  page  for  a  text  item,  inserted  the  HTML  or  script,  and 
told  NetObjects  Fusion  to  put  the  HTML  or  script  in  place  of  the  text. 

Preview  the  page  to  test  your  code,  and  view  the  source  from  your  browser  to  see 
the  resulting  HTML.  If  necessary,  go  back  and  adjust  the  box's  position  in  Page  view 
to  get  the  actual  spacing  you  want. 
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Coding  Your  Own  Frames 


You  can  create  HTML  frames  in  any  part  of  the  MasterBorder  without  coding 
HTML  by  using  Auto  Frames.  But  if  you  want  to  put  frames  in  the  body  of  your 
page,  you  can  script  them,  just  as  with  any  HTML  editor. 

Here's  an  example  of  accessing  HTML  to  create  a  section  of  a  site  that  uses  two 
horizontal  frames-one  body  frame  that  scrolls,  and  a  footer  frame  that  doesn't. 
Navigation  buttons  in  the  footer  open  each  of  two  pages  in  the  body,  while  a  Home 
Page  button  links  out  of  the  frames  section  to  the  site's  Home  page. 

1.  In  Site  view,  create  a  new  page  for  the  frameset — the  page  where  your  frames 
begin.  Name  the  page  Frames. 

2.  Beneath  this  page,  create  three  content  pages  for  the  frames  to  display,  named 
Footer,  One,  and  Two. 


Two 

[ 

Attach  HTML  to  this  page  to  define  it 
as  a  frameset 


Add  content  to  the  frames  on  these  pages 
using  NetObjects  Fusion  tools 


3.   Display  the  Frames  page  in  Page  view,  and  add  HTML  that  defines  it  as  a 

frameset,  setting  the  size  and  position  of  each  frame,  and  the  content  it  initially 
displays. 

Select  the  Layout,  click  the  HTML  button  on  the  Layout  Properties  palette,  and 
type  the  following  in  the  Between  Head  Tags  area  of  the  Page  HTML  dialog: 

<frameset  rows="*,70"> 

<frame  name="main"  src=';/html/one.html"> 

<frame  name="footer"  src=7html/footer.html"> 

</frameset> 

Or,  if  you're  publishing  the  site  using  the  Flat  directory  structure  rather  than  the 
by  Asset  Type  structure,  type  the  following  for  the  second  and  third  lines: 

<frame  name="main"  src=';/one.html"> 
<frame  name="footer"  src=7footer.html"> 
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This  HTML  creates  two  horizontal  frames — one  called  "main"  that  occupies  the 
bulk  of  the  page,  and  a  70-pixel-high  frame  called  "footer"  at  the  foot  of  the 
page. 

Click  OK  in  the  dialog  when  you're  done. 


Note:  The  src  attribute  is  a  relative  path  name  to  a  content  page  that  must  match 
exactly  the  path  name  generated  when  you  publish  the  page.  The  path 
depends  on  the  directory  structure  selected  in  Publish  view  (from  the  Publish 
menu,  choose  Arrange  Files,  and  then  choose  one  of  the  submenu  options). 
The  file  name  is  the  page's  name  in  Site  view,  all  lowercase,  with  an  .html 
extension  and  an  underscore  in  place  of  spaces  and  other  special  characters. 
So  One  in  Site  view  becomes  one.html  in  the  resulting  HTML.  If  you're  not 
sure  where  a  content  file  is  relative  to  your  frameset  page,  or  what  its  HTML 
name  is,  look  in  Publish  view. 

4.  Open  the  Footer  page  in  Page  view. 

5.  Click  in  the  MasterBorder  and  select  ZeroMargins  in  the  Name  field  on  the 
MasterBorder  Properties  palette. 

6.  Click  in  the  Layout  area  and  enter  1 10  in  the  Height  field  on  the  Layout 
Properties  palette. 

7.  Add  three  text  boxes  to  the  Layout,  containing  the  text  One,  Two,  and  Home. 


|      |Two          |      [Home  | 

J 

8.  Select  the  text  One,  click  Link,  select  the  Internal  Link  type,  and  select  the  One 
page.  In  the  Target  section  of  the  Link  dialog,  click  New  and  type  main  in  the 
text  field  next  to  the  New  button.  Click  Link  to  close  the  dialog. 

9.  Select  the  text  Two  and  create  an  internal  link  to  the  Two  page.  In  the  Target 
section  of  the  Link  dialog,  click  Existing  and  select  main  from  the  drop-down 
list.  Click  Link  to  close  the  dialog. 

10.  Select  the  text  Home  and  create  an  internal  link  to  the  Home  page.  In  the  Target 
section  of  the  Link  dialog,  click  Existing  and  select  _top  from  the  drop-down 
list.  Click  Link  to  close  the  dialog. 
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11.  Open  the  One  and  Two  pages  in  Page  view,  choose  the  ZeroMargins 
MasterBorder  on  the  MasterBorder  Properties  palette,  and  add  whatever 
content  you  want  to  appear  in  the  main  frame  for  each  page.  Add  content  to  the 
Home  page. 

You  can't  preview  to  see  scripted  frames,  so  publish  the  site  and  test  your  frames. 
Click  each  button  in  the  bottom  frame.  The  One  button  should  display  the  contents 
of  the  One  page  in  the  top  frame,  the  Two  button  should  display  the  Two  page  in 
the  top  frame,  and  the  Home  button  should  exit  the  frames  altogether  and  display 
the  Home  page  in  the  whole  browser  window. 


,1,     Ed,                „»„,,,*                H.lp   ■ 

,„ 

f  IS-  •  13- 

lie 
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ubHAFrarr.es.html 

Frameset  HTML  you 
added  defines  the  frame 
boundaries 


Add  pictures  and  text  to 
content  pages  using 
NetObjects  Fusion  tools 


"main"  frame 


"footer"  frame 
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CHAPTER  28 


Managing  Assets 

With  NetObjects  Fusion,  you  can  manage  all  the  assets — files,  links,  data  objects, 
and  variables — used  in  your  site.  In  Assets  view,  you  can  navigate  to  the  pages  on 
which  these  assets  appear,  delete  unused  assets,  and  verify  the  location  of  assets  that 
are  in  use.  For  information  about  how  to  add  assets  to  a  site,  see  Chapter  6,  "Page 
View  Basics." 

NetObjects  Fusion  uses  aliases  for  files  and  external  links,  so  you  can  globally 
replace  an  item  that  appears  on  several  pages — such  as  a  picture  or  an  external 
link — by  replacing  the  file  or  link  once  in  Assets  view.  If  you  insert  a  variable  in  text 
boxes  on  different  pages,  you  can  edit  the  value  of  the  variable  in  Assets  view  and 
NetObjects  Fusion  updates  all  instances  of  the  variable  throughout  your  site 
automatically. 

This  chapter  describes: 

♦  Managing  files 

♦  Managing  links  and  link  targets 

♦  Managing  data  objects 

♦  Managing  variables 
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Working  in  Assets  View 


Working  in  Assets  View 


Assets  view 


When  you  switch  to  Assets  view,  choose  which  kind  of  asset  to  view  by  clicking  one 
of  the  four  tabs  below  the  control  bar.  You  can  sort  a  list  by  clicking  a  column 
heading,  and  you  can  change  the  width  of  any  column  by  dragging  the  column 
divider  to  the  left  or  right. 
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Click  a  tab  to  see  file  assets,  links,  data 
objects,  or  user-defined  variables 


Clicka  column  heading 
to  sort  the  table 


Drag  the  column  divider  to 
change  column  width 


Depending 

on  the  selected  tab,  Assets  view  shows: 

Asset  type 

Column  headings 

Files 

Name,  Type,  In  Use,  Location,  Size,  Date,  Verify  Status 

Links 

Name,  Link  To,  Type,  Target,  Verify  Status 

Data  Objects 

Name,  Type 

Variables 

Name,  Contents 
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Managing  File  Assets 


When  you  click  the  Files  tab  in  Assets  view,  a  list  of  the  files  associated  with  your  site 
appears,  including  external  files  and  those  generated  by  NetObjects  Fusion.  File 
types  include  image,  audio,  video,  applets/plugins,  Java  class,  HTML,  data  source, 
and  link  target. 

In  Assets  view,  you  can  add  assets,  edit  asset  names,  and  go  directly  to  the  page 
containing  a  selected  asset.  You  can  verify  the  locations  of  assets  in  your  site,  and 
you  can  open  an  asset  file  for  editing  in  the  application  associated  with  it.  You  can 
also  replace  assets,  delete  selected  assets,  or  delete  all  unused  assets  in  a  single  action. 

For  example,  if  you  have  an  image  file  of  an  arrow  that  indicates  the  next  page  in  the 
site,  you  could  name  this  asset  Next  Page  and  place  it  on  several  pages.  If  you  later 
decide  to  change  the  image  to  a  pointing  finger,  you  need  only  edit  the  file  asset  so 
Next  Page  uses  the  pointing  finger  image  file.  NetObjects  Fusion  automatically 
changes  the  image  on  all  the  pages  that  include  the  Next  Page  image  asset. 

The  File  dialog  displays  an  asset's  name,  location,  and  the  pages  on  which  it  is  used. 
To  display  the  File  dialog,  double-click  an  asset's  name  in  Assets  Files  view. 


Location:  | C:\NetObjects  Fusion  ^\User  Sites\  Browse... 
n  Always  publish  file 


Pages 


About  Us  -  DefaultMasterB order 
Classes  -  DefaultMasterB  order 
Climbing  Shoes  -  DefaultMasterB  order 
Events  -  DefaultMasterB  order 
Helmet  -  DefaultMasterBorder 
Information  -  DefaultMasterBorder 
January  -  DefaultMasterBorder 


This  is  the  name  that  appears  in  the 
Name  list  in  Assets  Files  view 


This  is  the  asset's  location 

Selecting  this  option  publishes  the 
asset  any  time  the  site  is  published, 
even  if  the  asset  is  not  in  use 

These  are  the  pages  on  which  the 
asset  is  used 


Note:  Image  files  that  you  place  on  stacked  pages  to  populate  an  internal  data  object  are  not 
listed  in  Assets  view.  You  can  manage  such  files  directly  on  the  stacked  pages.  For 
information  about  data  objects  and  stacked  pages,  see  Chapter  26,  "Data  Publishing." 
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File  Asset  Characteristics 


To  effectively  manage  assets,  it  helps  to  understand  the  characteristics  of  asset  files 
and  how  NetObjects  Fusion  handles  them  in  Assets  view. 

♦  Assets  view  lists  all  assets  ever  added  to  a  site  whether  they  are  currently 
included  in  the  site  or  not. 

♦  Assets  view  is  a  list  of  pointers  to  the  asset  files  in  their  directories.  Assets  view 
does  not  contain  the  actual  asset  files  themselves.  When  you  publish  a  site,  assets 
are  copied  from  their  current  location  to  the  publish  location. 

♦  Assets  are  not  copied  to  the  \Assets  folder  except  in  special  cases — when  you 
import  a  site  that  contains  assets  in  its  assets  directory  or  start  a  site  based  on  a 
template  with  assets. 

♦  Assets  view  does  not  show  the  contents  of  any  specific  directory  on  your  local 
hard  disk  or  server. 

Adding  a  File  Asset 

1.  In  Assets  Files  view,  from  the  Assets  menu,  choose  New  File  Asset,  or  click  New 
Asset  on  the  control  bar. 

The  File  dialog  appears. 

2.  In  the  Location  field  of  the  File  dialog,  type  the  path  and  file  name  of  the  asset 
you  want  to  add,  or  click  Browse  and  select  a  file. 

3.  If  you  want,  edit  the  Asset  name  and  click  OK.  See  "Editing  Asset  Names  and 
Locations." 

4.  To  force  publication  of  the  file,  even  if  it  is  not  in  use,  select  Always  publish  file. 

5.  Click  OK. 

When  you  add  an  asset  in  this  manner,  it  is  available  for  use  in  your  site,  but  it  is  not 
yet  actually  in  use.  The  asset  now  appears  on  the  Assets  tab  in  the  Open  dialog.  See 
"Reusing  Assets"  on  page  79. 
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Editing  Asset  Names  and  Locations 

Giving  custom  names  to  assets  can  make  them  easier  to  manage. 

1.  In  Assets  Files  view,  double-click  the  asset  name  to  display  the  File  dialog. 

2.  Type  a  new  name  in  the  Name  field  and  click  OK. 
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This  picture  shows 
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You  can  also  edit  the  location  directly  in  the  File  dialog.  For  example,  you  could 
enter  a  URL  instead  of  a  file  path  to  point  to  a  dynamic  image  on  a  server.  Such 
images,  however,  are  represented  by  an  X  in  Page  view,  because  the  asset  is  not 
accessible. 
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Opening  a  File  Asset  in  an  External  Application 

NetObjects  Fusion  can  automatically  open  a  file  asset  in  the  external  application 
with  which  the  file  asset  is  associated.  For  HTML  documents,  and  .gif  and  .jpeg 
image  files,  you  can  specify  your  preferred  editing  application  in  the  Application 
Options  dialog.  See  "Setting  Program  Options"  on  page  20.  For  other  types  of  files, 
see  "Editing  Objects  and  Assets"  on  page  80. 

To  open  a  file  asset  in  an  external  application: 

1 .  In  Assets  Files  view,  select  the  asset. 

2.  From  the  Assets  menu,  choose  Open  Asset. 

3.  Make  your  changes  and  save  the  file  in  the  external  application. 

Displaying  a  Page  Containing  a  Specific  File  Asset 

1.  In  Assets  Files  view,  double-click  a  file  asset  to  open  the  File  dialog. 

2.  Select  the  page  you  want  to  see  from  the  list  of  pages. 

3.  Click  the  Go  To  button. 

The  page  you  selected  appears  in  Page  view. 

Deleting  a  File  Asset 

You  should  only  delete  assets  not  in  use.  If  you  delete  an  asset  in  use  on  a  page,  the 
object  containing  that  asset  appears  as  a  blank  or  with  an  "X"  through  it  in  Page 
view. 

To  avoid  deleting  assets  in  use,  double-click  the  asset  in  Assets  view  to  see  if  it's  used 
on  any  pages  before  you  decide  to  delete  the  asset. 

To  delete  a  file  asset: 

1.  In  Assets  view,  right-click  the  file  asset  you  want  to  delete  and  choose  Delete  File 
Asset  from  the  shortcut  menu.  You  can  also  select  the  file  asset  in  the  list  and 
press  the  Delete  key  on  the  keyboard. 

2.  Click  Yes  to  confirm  the  deletion. 

Note:  You  cannot  undo  this  operation.  You  must  use  the  New  File  Asset  command 
on  the  Assets  menu  to  recreate  the  file  asset. 
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Deleting  All  Unused  File  Assets 

1.  In  Assets  view,  from  the  Assets  menu  choose  Delete  All  Unused  File  Assets. 

2.  Click  Yes  to  confirm  the  deletion. 

NetObjects  Fusion  removes  all  file  assets  for  which  the  In  Use  indicator  is  not 
Yes. 


Note:  You  cannot  undo  this  operation.  You  must  use  the  New  File  Asset  command 
to  recreate  tile  assets. 


Verifying  File  Assets 

To  make  sure  assets  publish  correctly,  you  can  verify  that  all  file  assets  are  in  their 
expected  folders.  However,  if  any  portion  of  the  file's  path  has  changed,  the  file  will 
not  be  found  or  verified.  For  example,  if  the  hard  disk  drive  letter  is  not  the  same,  or 
not  present,  or  if  a  folder  name  is  changed  or  the  folder  is  moved,  or  if  the  file  name 
is  changed  or  the  file  is  moved,  the  file  will  not  be  found. 

1 .   In  Assets  view,  from  the  Assets  menu  choose  Verify  All  File  Assets. 

NetObjects  Fusion  verifies  and  reports  the  path  status  of  all  files. 

♦  When  a  file's  path  information  is  correct,  NetObjects  Fusion  lists  the  date 
and  time  found  in  the  Verify  Status  column. 


Verify  Status  

Found  on  4/1 102  9:29:26  AM 
Found  on  4/1 102  9:29:26  AM 
Found  on  4/1 102  9:29:26  AM 
Found  on  4/1 102  9:29:26  AM 
Found  on  4/1 102  9:29:26  AM 
Found  on  4/1 102  9:29:26  AM 
Found  on  4/1 102  9:29:26  AM 
Found  on  4/1 102  9:29:26  AM 
Not  Found  on  4/1 102  9:30:48  AM 
Found  on  4/1 102  9:29:26  AM 
Found  on  4/1 102  9:29:26  AM 
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♦  If  a  single  file  is  not  found,  the  Verifying  Files  Used  by  File  Assets  dialog 
appears  identifying  the  missing  file  and  the  original  path. 


Verifying  Files  Used  by  File  Assets 


This  site  is  using  a  file  that  is  no  longer  available. 
Please  select  the  new  location  of  the  file. 


Missing  file: 

| C:\NetObjects  Fusion  7\User  Sites\MountainJacques^Assets\iCatBuilt.gif 
New  location: 

I 


Skip 


J?]*] 


♦  If  a  folder  containing  assets  is  not  found,  the  Verifying  Folders  Used  by  File 
Assets  dialog  appears  identifying  the  missing  folder  and  its  original  path. 


Verifying  Folders  Used  by  File  Assets 


J?]*] 


This  site  is  using  files  in  a  folder  that  is  no  longer  available. 

Please  select  the  folder  where  the  files  or  sub-folders  are  now  (^ated. 

Missing  folder: 


|  c:\netobjects  fusion  7\tutorial\ 


r 


Files  and  sub-folders  in  missing  folder: 


C:\NetObjects  Fusion  7\Tutoi 
C:\NetObjects  Fusion  7\Tutoi 
C:\NetObjects  Fusion  7\Tutoi 
C:\NetObjects  Fusion  7\Tutoi 
C:\NetObjects  Fusion  7\Tutoi 
C:\NetObjects  Fusion  7\Tutoi 


ial  V\dB  anners\Fusion7Banner.  gif 

ial  V\dB  anners\RockClimbB  anner.  gif 

ial  V\dB  annersVWonderLodge.  gif 

ial\boyclirnber.jpg 

ial\girlbiker.jpg 

ial\girlclirnber.jpg 


Skip 


2.  Resolve  the  paths  of  any  lost  files  or  folders. 

♦  To  specify  a  new  path,  click  Browse  and  locate  the  file  or  folder. 

♦  To  skip  the  lost  item  and  continue  verification,  click  Skip.  NetObjects 
Fusion  gives  this  file  Not  found  status  and  goes  on  to  verify  subsequent  files 
or  folders.  If  the  file  is  due  to  be  published,  you  receive  a  publish  error. 

♦  To  stop  the  verification  process,  click  Cancel.  The  verification  status  of  the 
current  file  or  subsequent  files  is  not  updated. 

3.  When  verification  is  complete,  click  OK  in  the  confirmation  dialog. 
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Managing  Links  and  Link  Targets 

When  you  click  the  Links  tab,  a  list  of  all  the  links  and  link  targets  used  in  your  site 
appears,  including  external  links,  file  links,  user-defined  internal  links,  and  smart 
links.  See  Chapter  19,  "Creating  Links  and  Anchors." 


1             ra«  i 

Links                              Data  Object;  ] 

Variable; 

Name 

|  Link  To 

1  Type 

|  Target 

Verify  Status 

_l>hnk 

Link  Target 

_l>m  e-iwt 

Link  Target 

_self 

Link  Target 

_top 

Link  Target 

Climbing  Shoes 

Climbing  Shoes 

internal 

(none) 

Helmet 

Helmet 

internal 

(none; 

Home 

Home 

internal 

(none) 

Jniuun  v 

January 

internal 

(none) 

Jsnunv 

Januaryftielay 

internal 

(none;; 

Jniumi  v 

JanuarytfcolorarJo 

interna! 

(none) 

Jniumi  v 

Januarytfkayak 

interna! 

(none) 

Jniumi  v 

Januarytfmaine 

interna! 

(none) 

Jninmi  v 

January  #ne  pal 

mi  etna! 

(none) 

NetObjects  Home  Pnye 

http:/M,ww  .netobiects.com 

Exter  rial 

(none) 

Snow  Jsieket 

Snow  Jacket 

Internal 

Tom  ? 

TouraSICamping 

Internal 

Tom  ? 

Tom  sSMouniainCycling 

Internal 

(none) 

Tom  ? 

Tout's#Mounii=)inHiking 

Internal 

(none) 

Links  between  entries  in  a  data  list  and  their  associated  stacked  pages  do  not  appear 
in  Assets  view.  You  can  manage  such  links  directly  on  the  data  list  pages.  See 
"Creating  a  Data  List"  on  page  400. 

Updating  an  External  Link 

The  Link  To  location  varies  depending  on  the  type  of  link.  In  Assets  view,  you  can 
change  the  location  of  an  external  link  yourself  by  changing  the  URL.  You  can  also 
change  the  name  of  the  link  for  Assets  view  but  not  the  link's  other  characteristics. 

1.   In  Assets  Links  view,  double-click  the  external  link  you  want  to  update. 
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The  Links  dialog  appears. 


J?!*] 


Link  to:  |  mailto:  B  ob@M  ountainJ  acques-coa— 
Pages  


Contest  ■  ContestLayout 


3oTo 


1 


Name  of  the  link 
Location  of  the  link 

List  of  pages  that  use  the  link 


2.  Change  the  name  in  the  Name  field  if  desired. 

3.  Update  the  URL  in  the  Link  To  field  and  click  OK. 

You  can  only  update  the  location  of  one  link  at  a  time.  To  update  other  external 
link  URLs,  repeat  the  process. 

If  you  have  a  list  of  links  created  in  HTML  and  import  the  HTML  into  Page 
view,  the  links  are  automatically  added  to  Assets  view.  Otherwise,  you  cannot 
import  a  list  of  links  in  Assets  view. 
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Displaying  the  Page  Containing  a  Link 

1.  Double-click  the  link  in  Assets  Links  view.  The  Links  dialog  appears. 

2.  Select  the  page  you  want  to  see  in  the  list  of  pages. 

3.  Click  the  Go  To  button. 

The  page  you  selected  appears  in  Page  view. 

Adding  an  External  Link 

1 .  In  Assets  Links  view,  from  the  Assets  menu  choose  New  Link,  or  click  New  Asset 
on  the  control  bar. 

The  Links  dialog  appears. 

2.  Enter  a  name. 

3.  Type  the  link  destination  and  click  OK. 

Be  sure  to  include  http://  or  a  similar  designator. 

Deleting  a  Link 

1 .  In  Assets  Links  view,  select  the  link  you  want  to  delete 

2.  From  the  Edit  menu,  choose  Delete  Link  or  press  Delete. 

3.  Click  Yes  to  confirm  the  deletion. 

You  cannot  delete  a  link  that  is  in  use.  You  must  use  the  Link  dialog  to  unlink. 

Note:  You  cannot  undo  this  operation.  You  must  use  the  Add  Link  command  to 
recreate  the  external  link.  If  you  accidentally  delete  a  non-external  link,  you 
must  recreate  it  in  Page  view. 

Updating  Link  Targets 

1 .  In  Assets  Links  view,  double-click  the  link  target  you  want  to  update. 
The  Link  Targets  dialog  appears. 

2.  Change  the  name  of  the  link  target  if  desired. 

3.  Click  OK. 
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Verifying  Links 

To  make  sure  links  will  work  properly  when  a  site  visitor  clicks  them,  you  can  verify 
link  destinations. 

1.  In  Assets  Links  view,  from  the  Assets  menu,  choose  Verify  All  Links. 

NetObjects  Fusion  displays  a  progress  bar  as  it  verifies  and  reports  the  status  of 
link  destinations.  It  accesses  the  Internet  to  verify  external  link  references.  If  you 
are  not  connected  to  the  Internet,  the  external  links  are  not  verified. 

♦  When  a  link's  destination  is  found,  the  date  and  time  of  validation  appear  in 
the  Verify  Status  column. 

♦  If  a  link's  destination  is  not  found,  the  problem  is  described  in  the  Verify 
Status  column. 

When  verification  is  complete,  the  progress  bar  disappears. 

2.  Resolve  the  destinations  of  broken  links  by  double-clicking  the  link  and  editing 
it  as  described  in  "Updating  an  External  Link." 

Link  verification  takes  place  in  the  background,  so  you  can  switch  to  another  view 
and  continue  working  while  links  are  being  verified. 

To  verify  links  through  a  proxy  server,  open  the  Windows  Control  Panel  and 
double-click  the  Internet  icon.  In  the  Internet  Properties  dialog,  click  the  Advanced 
tab,  select  Use  Proxy  Server,  and  configure  your  proxy  server  settings. 


Note:  When  NetObjects  Fusion  cannot  verify  that  an  http,  rlogin,  tn3270,  snews,  or 

JavaScript  link  is  valid,  "Unsupported  URLType"displays  in  the  Verify  Status  column.  If 
NetObjects  Fusion  cannot  verify  a  mailto,  news,  or  telnet  link,  no  status  displays. 

Managing  Data  Objects  and  Photo  Galleries 

Data  objects  are  collections  of  fields  of  data.  You  can  use  a  data  object  to  publish 
data  without  using  CGI  scripts  or  database  programming.  For  information  about 
data  objects,  including  how  to  create  and  delete  them  in  Assets  view,  see  Chapter  26, 
"Data  Publishing." 

When  you  click  the  Data  Objects  tab,  NetObjects  Fusion  displays  a  list  of  all  the  data 
objects  used  in  your  site.  In  an  internal  data  object,  you  can  edit  the  name  and  field 
names  and  add  new  fields.  See  "Changing  an  Internal  Data  Field  Name"  on 
page  398. 
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For  an  external  data  object,  you  can  change  Simple  fields  to  Image  fields  and  vice 
versa,  but  you  cannot  edit  field  names  or  add  new  fields,  because  these  items 
depend  on  data  in  the  external  data  file.  Data  objects  can  also  be  deleted,  but  use 
care  when  deleting  and  make  sure  the  data  object  is  no  longer  in  use  on  the  site. 

Photo  galleries  are  a  special  type  of  data  object.  For  information  about  photo 
galleries,  including  how  to  delete  them  in  Assets  view,  see  Chapter  14,  "Creating 
Photo  Galleries."  You  can  configure  a  photo  gallery  here  by  double-clicking  it. 


Managing  Variables 

Text  variables  make  it  easy  to  update  text  that  appears  throughout  your  site.  User- 
defined  variables  are  displayed  in  Assets  Variables  view  so  you  can  edit,  create,  or 
delete  them.  NetObjects  Fusion  also  provides  standard  variables,  such  as  the  date 
and  time  the  site  was  created  or  last  modified,  but  these  are  not  displayed  in  Assets 
Variables  view. 


Adding  a  Variable 


1233 


New  Asset 


1.   In  Assets  Variables  view,  from  the  Assets  menu  choose  New  User-Defined 
Variable,  or  click  New  Asset  on  the  control  bar. 

The  New  Variable  dialog  appears. 


Variable  name 


2.   Enter  a  name  and  value  for  your  variable  and  click  OK. 
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Editing  a  Variable 


i. 


Double-click  the  variable  in  Assets  Variables  view. 


The  Edit  Variable  dialog  appears. 


variable 


Product  Price 


Value 


Dsncel 


2.   Edit  the  name  and  value  of  the  variable  and  click  OK. 

If  you  edit  the  value  of  the  variable,  NetObjects  Fusion  updates  all  text  blocks 
containing  that  variable  with  the  new  value.  See  "Creating  a  User-Defined 
Variable"  on  page  171  for  information  about  adding  variables  to  your  pages. 


1.  In  Assets  Variables  view,  select  the  variable  you  want  to  delete. 

2.  From  the  Edit  menu,  choose  Delete  User-Defined  Variable. 

3.  Click  Yes  to  confirm  the  deletion. 

Note:  You  cannot  undo  this  operation.  You  must  use  the  New  Variable  command  to  recreate 
the  variable.  Do  not  delete  a  variable  that  is  in  use.  If  you  do,  it  will  be  replaced  with 
Undefined  User  variable:vor/ab/e  name  in  the  text  where  it  was  used. 


Deleting  a  Variable 
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Publishing  Your  Site 

After  completing  your  site  design  and  development,  you're  ready  to  publish  the 
results.  Publishing  puts  your  site  on  a  server  so  you  and  others  can  see  it  using  a 
browser.  The  NetObjects  Fusion  publishing  process  generates  HTML  files  for  the 
site's  pages  and  associated  assets.  NetObjects  Fusion  transfers  the  generated  HTML 
files  to  the  server  you  use  for  Web  hosting.  You  can  control  the  location  of  your  site, 
directing  NetObjects  Fusion  to  save  it  to  a  local  disk  drive  so  only  you  can  see  it,  or 
to  a  remote  server  so  others  can  see  it,  too.  When  you're  sure  the  site  is  ready  for  the 
Web,  you  publish  it  to  a  Web  server  so  everyone  in  the  world  can  visit  your  site. 


Note:  Sites  published  with  NetObjects  Fusion  work  with  any  Web  server,  on  any  operating 
platform.  No  special  Web-server  extensions  are  required.  If  your  site  contains  special 
components  also  installed  on  the  server — including  NetObjects  Fusion  Form  Handler, 
CGI  scripts,  or  third-party  components — it  requires  extra  steps  to  set  up  to  publish  on 
a  server. 

This  chapter  describes: 

♦  The  publishing  process 

♦  Exploring  Publish  view 

♦  Publishing  locally 

♦  Transferring  the  site  to  the  Web 
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The  Publishing  Process 

The  NetObjects  Fusion  publishing  process  involves  two  basic  steps:  generating 
HTML  files  and  then  transferring  the  generated  HTML  files  to  the  Web  server. 

♦  When  you  select  Publish  Site,  NetObjects  Fusion  converts  your  site  into  HTML 
pages  and  associated  assets  using  the  SiteStructure,  page  design,  content,  links, 
and  assets  information  in  the  Sitename.nod  file.  These  generated  HTML  files  are 
used  by  browsers  to  display  your  Web  site.  You  specify  where  the  generated 
HTML  files  are  saved.  A  typical  scenario  is  to  publish  the  HTML  files  locally 
onto  your  computer's  hard  disk  where  you  can  then  open,  run,  and  test  the  site 
in  your  browser  without  connecting  to  the  Internet.  When  the  site  is  exactly 
right,  you're  ready  to  publish  it  to  a  Web  server. 

♦  Selecting  Transfer  Files  to  Server  from  the  Publish  menu  copies  the  locally 
published  HTML  files  to  the  server  you  use  for  Web  access.  To  speed  the 
transfer  process,  NetObjects  Fusion  uses  its  own  built-in  FTP  program. 


Caution:  You  must  use  NetObjects  Fusion  to  transfer  your  site's  HTML  and  asset  files  from  one 
location  to  another.  You  cannot  move  generated  HTML  files  from  one  location  to 
another,  nor  can  you  rename  the  files  in  Windows  Explorer.  Renaming  the  files  or 
moving  them  to  a  new  location  breaks  links  because  the  file  locations  are  different 
than  those  specified  in  the  generated  HTML  files. 

NetObjects  Fusion's  default  publish  setting  (Local  Publish)  is  preconfigured  to 
publish  the  HTML  files  on  your  local  disk.  You  do  not  have  to  do  additional  setup. 
However,  when  you're  ready  to  publish  to  a  remote  Web  server,  you  must  set  up  a 
publish  profile  for  your  ISP's  Web  server.  You  can  create  as  many  publish  profiles  as 
you  need,  but  you  can  only  log  on  to  one  server  at  a  time. 

If  you're  working  on  a  company's  intranet  and  want  a  few  site  visitors  to  test  the  site 
before  you  transfer  it  to  the  Internet,  you  can  publish  the  HTML  files  to  one  or 
more  private  intranet  servers.  Then,  when  it's  ready  to  share  with  the  world,  you 
can  publish  the  site  directly  to  your  company's  Web  server. 
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The  following  figure  summarizes  the  basic  publishing  process  with  NetObjects 
Fusion. 


Local  Publishing 


O Develop  the  site 
on  your  computer 


□ 


i  -i 


Generate  the  site's  HTML  files  and  save  them 
on  your  hard  disk. 

NetObjects  Fusion  converts  the  site  to  HTML  and  saves 
it  on  your  local  hard  disk.  You  can  check  the  site  using 
your  browser  without  logging  on  to  the  Internet.  No 
additional  setup  is  needed  to  generate  the  HTML  files 
and  save  them  locally  on  your  hard  disk. 


Remote  Publishing 


Ca  When  the  site  is  ready  for  the  world  to  see, 
'  publish  it  to  the  ISP  server. 

NetObjects  Fusion  publishes  the  HTML  files  to  the 
server.  The  first  time  you  transfer  you  need  to  select 
setup  options  to  define  your  ISP  server's  profile  such  as 
URL,  type  of  HTML  to  use,  file  structure,  and  so  on.  You 
only  need  to  do  this  setup  once. 


Additional  Publishing  Notes 

♦  Sites  published  with  NetObjects  Fusion  work  with  any  Web  server,  on  any 
operating  platform.  No  special  Web  server  extensions  are  required. 

♦  When  you  re-publish  your  site,  for  example  to  update  pages  or  add  new 
information,  NetObjects  Fusion  overwrites  existing  files  as  needed.  You  can  also 
remove  old  files  or  obsolete  assets  from  local  or  remote  directories  by  selecting 
View/Delete  Server  Contents  from  the  Publish  menu. 

♦  NetObjects  Fusion  does  not  automatically  publish  through  firewalls  or  to  proxy 
servers.  See  "Publishing  with  Firewalls  or  Proxy  Servers"  on  page  479. 

♦  If  NetObjects  Fusion  has  difficulty  storing  your  site  on  a  remote  Web  server: 

-❖•  Make  sure  your  system  is  online  and  has  a  valid  connection  to  your  network 
or  the  Internet. 

-v-  Make  sure  the  server  is  not  down  or  offline. 

-v-  Make  sure  your  publish  profile  settings  are  correct.  Test  the  remote  server, 
account  name,  and  password  settings  displayed  in  the  Publish  Settings 
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dialog  by  using  them  to  log  on  to  the  server  using  a  separate  FTP  or  telnet 
application. 

■0-  Make  sure  your  account  has  the  appropriate  permissions  and  that  sufficient 
storage  space  for  your  site  is  available  on  the  server. 

•v-  If  your  company  uses  a  proxy  server  or  has  established  firewalls  for  security, 
make  sure  the  server  settings  are  appropriate  for  the  proxy  or  firewall. 

♦  If  you  define  publishing  settings  for  a  site,  and  then  export  that  site  as  a 

template,  those  settings  travel  with  the  template.  If  you  are  sharing  a  template 
with  colleagues  who  can  use  the  same  publish  settings,  you  can  save  time  by 
configuring  the  publish  settings  in  advance,  exporting  them  with  a  template, 
and  then  distributing  the  template. 


Exploring  Publish  View 


You  use  NetObjects  Fusion  Publish  view  to  publish  a  site.  Publish  view  looks  similar 
to  Microsoft  Windows  Explorer  or  Windows  NT  File  Manager. 


Contents  of  location 


File    Edit    Go    Publish    Tads  Help 


NetObjects  Fusion  -  MountainJacques.nod 


3 

Pag. 


Publish  Settings       Publish  Site 


[Contents  of  directory  / 


-  ©  i 

CJ  About_Us 
H-CH  Events 
□  -  Services 
3- CD  Store 

I  ~l  Tours 


Name 


ly]AboLit_Us 
Cj  Events 

 |  Services 

D  Store 

 |  Tours 

_Np1.gif 
_NRp2.gif 
About_Us_Hp3.gif 
About_Us_HRp3.gif 
Aboul_Us_N  Banner. gil 
About_Us_NBanner_1 
^  About_Us_Np1.gif 

Aboiit_Us_NRp2.gif 
J~||  Background gif 
backgrounds.  cs<i 
|C3  bannei  shadow. gil 
g3BuiltWithN0F.gif 
13  Classes_NBanner.gil 
f3  Classes_N  B  anneM .  gi 
|[3  Climbing_Shoes_NBan 
T^l  Climbing_Shoes_NBan 
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Never  Published 
Never  Published 
Never  Published 
Never  Published 
Never  Published 
Never  Published 


|  Type  |  Attributes     |  Last  Remote  Publish  |  Last  Local  Publish 


2  PM 
2  PM 
2  PM 
2  PM 


4/9/02  6:37  1 
4/9/02  6:37  1 
4/9/02  6:37  1 
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Never  Published 
4/9/02  6:37:12PM 
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Publish  view  presents  a  representation  of  the  file  structure  that  will  be  created  when 
you  publish  your  site.  It  does  not  represent  the  existing  structure  for  your  site  on 
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your  hard  disk  or  server.  Therefore,  changing  the  directory  structure  in  Publish 
view  does  not  affect  the  page  relationships  in  Site  view  and,  likewise,  changing  the 
page  relationships  in  Site  view  does  not  affect  the  representation  in  Publish  view. 

Changes  that  you  make  to  the  directory  structure  in  Publish  view  only  affect  your 
site's  current  directory  structure  when  you  publish  your  site. 

The  Contents  of  location  pane  on  the  left  displays  the  directory  structure  of  your 
site  as  it  will  be  published  on  your  server.  You  can  delete,  rearrange,  or  rename  the 
directories  shown  in  the  pane,  and  you  can  create  new  subdirectories  at  any  level 
below  the  root.  Locked  components  and  their  related  assets,  signified  by  a  black 
lock  image  on  their  icons,  cannot  be  renamed  or  rearranged. 

The  Contents  of  directory  pane  on  the  right  displays  the  contents  of  the  directory 
currently  selected  in  the  left  pane.  For  each  directory,  page,  or  asset,  the  pane 
displays  its  name,  type,  attributes,  and  the  date  and  time  of  the  last  local  and  remote 
publish.  You  can  sort  the  content  files  and  folders  by  clicking  a  column  heading, 
and  you  can  resize  the  columns  by  dragging  the  column  heading  border.  The  icons 
associated  with  different  file  types  are  set  in  the  Windows  File  Types  Registry. 

Click  a  directory's  plus  sign  to  expand  the  display  to  show  the  subdirectories 
beneath  it.  Click  a  directory's  minus  sign  to  collapse  the  display  and  hide  the 
subdirectories  beneath  it.  Resize  the  panes  by  dragging  the  divider  bar  in  either 
direction. 

Publishing  Locally 

While  developing  a  site,  you  should  publish  it  at  least  once  to  your  local  hard  disk  to 
check  that  the  site  works  as  intended.  After  the  site  is  published  to  your  hard  disk, 
NetObjects  Fusion  launches  your  browser  so  you  can  view  the  site  and  see  how  it 
will  appear  to  site  visitors  on  the  Web. 

If,  after  publishing  the  site  to  your  hard  disk,  you  make  changes  to  the  site  in 
NetObjects  Fusion,  re-publish  the  site.  Depending  on  the  complexity  of  the  site, 
you  may  publish  several  times  to  get  the  site  working  as  desired.  Then,  when  the  site 
works  perfectly,  publish  it  to  your  Web  server  or  ISP  server  so  everyone  in  the  world 
can  appreciate  your  handiwork. 
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Setting  Up  to  Publish  Locally 


J3J 

Publish  Settings 


1 .  In  Publish  view,  click  the  Publish  Settings  button  on  the  control  bar. 
The  Publish  Settings  dialog  appears. 

2.  In  the  Select  Profile  drop-down  list,  choose  Local  Publish. 


Publish  Settings 


Select  Profile:     |  Local  Publish 


New  Profile...    |    Remove  Profile...  | 


Profile  Name:  | Local  Publish 
-  Directory:  — 


C:\NetObjects  Fusion  7\User  SitesVMySiteVLocal  Publish 

Browse...  | 


Advanced  publish  settings...         Save  As  Global  Profile...  | 


□  K     |     Cancel  | 


3.   Check  the  Directory  name.  By  default,  NetObjects  Fusion  preconfigures  the 
local  location  to  \Sitename\loca\  Publish.  Also,  make  sure  the  local  disk  drive  has 
sufficient  space  for  your  published  site  files. 

If  you  want  to  publish  the  site  to  a  different  directory,  do  one  of  the  following: 

♦  Enter  the  drive  and  directory  path  you  want  to  use.  This  path  can  point  to  an 
existing  directory  or  create  a  new  directory. 

To  publish  to  a  different  machine  on  your  local  network,  create  a  new  local 
publish  profile  and  browse  to  that  machine. 

♦  Click  Browse  and  select  the  folder  you  want  to  use,  or  create  a  new  folder. 

To  create  a  new  folder,  select  the  folder  in  the  Browse  dialog  in  which  you  want 
to  create  the  new  folder,  then  click  OK.  Enter  the  name  of  the  new  folder  at  the 
end  of  the  path  in  the  Directory  field. 

To  prevent  your  site's  HTML  files  from  getting  mixed  in  with  other  files,  you 
should  always  use  an  empty  directory  the  first  time  you  save  the  files. 
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4.   Click  Advanced  publish  settings. 


x  Advanced  Publish  Settings 

File  Naming  j 

Home  page  file  name:              |  Index 

.J 

File  extension  for  HTML  pages:    |  .html 

J  J 

IlZOKZj 

Cancel 

5.  Select  the  options  for  your  site's  pages: 

♦  Home  page  file  name.  Index  is  the  default  page  name  recognized  by  most  Web 
servers.  Select  Current  Page  Name  to  set  the  Home  page  to  use  the  same 
name  as  in  Site  view.  Select  Home  or  Default  to  set  the  page  as  in  Home.html 
and  Default.html. 

♦  File  extension  for  HTML  pages.  Select  .htm,  .html  or  .shtml  depending  on  the 
page  extension  your  browser  recognizes.  Click  the  browse  button  to  enter  a 
page  extension  that  is  not  available  in  the  drop-down  list. 

Make  sure  you  use  a  page  extension  that  your  browser  recognizes  or  it  might  not 
display  the  page  properly.  If  you  used  the  Custom  Names  dialog  in  Site  view  to 
assign  a  file  name  extension  for  an  individual  page,  that  customized  extension 
overrides  the  site  default  for  that  page. 

6.  Click  OK. 

Setting  HTML  Options 

NetObjects  Fusion  includes  a  variety  of  options  to  control  HTML  format  and 
generation. 

1.  In  any  view,  from  the  Tools  menu,  choose  Options> Current  Site. 
The  Current  Site  Options  dialog  appears. 

2.  On  the  General  tab,  click  HTML  Options. 
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HTML  Options 


Formatting 

Indentation:  C  Tab 


I-  Maximum  compression 


(*  IS  paces  4 


Line  breaks:  PCAJnix 


"31 


r  Word  wrap: 


Letter  casing  - 


HTML  tags:    | Uppercase  Attributes:  | Uppercase 


Other  options  

1^  Use  transparent  GIF  as  spacer 
P  Include  HTML  comments 


W  Include  Generator  meta  tag:     [NetObjects  Fusion  7  for  Windows 

W  Include  character  set  meta  tag 

I-  Background  image  offset:     Left:  MO  Top:  M6 


Set  the  HTML  formatting  options.  These  settings  do  not  affect  the  appearance 
of  your  site.  The  settings  only  affect  the  HTML  code  that  is  created  when  you 
publish  the  site. 

♦  Indentation.  Select  tabs  or  a  specific  number  of  spaces  to  indent  lines  of  the 
code  so  it  is  easier  to  read. 

♦  Maximum  compression.  Select  this  option  if  you  do  not  want  site  visitors  to 
easily  read  your  HTML  code.  If  this  option  is  selected,  line  breaks,  tabs,  and 
unnecessary  spaces  that  make  the  code  more  readable  are  stripped  from  the 
generated  HTML  code.  The  generated  HTML  code  uses  as  few  characters  as 
possible  and  the  code  will  be  unintelligible.  To  restore  compressed  code  so 
you  can  read  it,  clear  this  option  and  republish  the  site. 

♦  Line  breaks.  Choose  PC/Unix  or  Mac  to  set  the  line  breaks  in  the  code  for  the 
platform  you  expect  to  use  to  view  the  code.  Your  choice  of  line  breaks  does 
not  affect  the  browser's  interpretation  of  the  code  regardless  of  the  computer 
platform  being  used  to  view  your  site. 

♦  Word  wrap.  Select  the  number  of  characters  per  line  of  code  before  it  wraps  to 
the  next  line.  This  option  enhances  readability  of  the  HTML  code  in  text 
editors  that  do  not  automatically  wrap  text.  However,  this  can  cause  text  to 
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wrap  in  the  middle  of  an  HTML  tag,  which  prevents  code  from  working 
properly,  and  for  some  JavaScript  code,  you  may  need  to  deselect  this  option 
so  the  lines  do  not  wrap. 

♦  HTML  tags.  Select  whether  the  HTML  tags  are  in  uppercase  or  lowercase — 
such  as  <H1>  or  <hl> — in  the  generated  HTML  code. 

♦  Attributes.  Select  whether  the  tag  attributes  are  in  uppercase  or  lowercase — 
such  as  BGCOLOR  or  bgcolor — in  the  generated  HTML  code. 

♦  Use  transparent  GIF  as  spacer.  Select  this  option  if  you  want  NetObjects  Fusion 
to  use  a  transparent  GIF  named  clearpixel.gif  to  space  items  accurately  on  a 
page.  If  you  generate  tables  on  a  page,  NetObjects  Fusion  places  invisible 
image  files  of  varying  widths  and  heights  in  the  table  cells  to  ensure  accurate 
placement  of  objects. 

♦  Include  HTML  comments.  Select  this  option  to  insert  comments  into  your 
generated  HTML  code  that  makes  reading  it  easier.  For  example,  with  this 
option  selected,  the  comment  <!-Startof  the  Body  for  this  page->  appears 
before  the  <BODY>  tag. 

♦  Include  Generator  meta  tag.  Select  this  option  to  identify  the  application  that 
generated  the  HTML  code.  The  name  of  the  application  appears  in  the 
code's  META  tag.  The  default  generator  META  tag  for  your  site  is 
NetObjects  Fusion  7  for  Windows.  You  can  also  manually  enter  information 
to  use  for  the  generator's  name  in  the  box. 

♦  Include  character  set  meta  tag.  Select  this  option  to  include  the  character  set 
for  the  site  in  the  META  tag  of  each  page.  Normally  you  only  use  this  option 
if  your  site  uses  a  non-Western  character  set. 

♦  Background  image  offset.  Select  this  option  to  compensate  for  the  small 
borders  most  browsers  add  to  the  top  and  left  sides  of  their  windows.  By 
selecting  this  option  you  can  shift  the  image  in  NetObjects  Fusion  so  the 
page  content  starts  in  the  upper  left  corner  of  the  page.  Enter  values  in  the 
Top  and  Left  boxes  to  offset  the  background  image. 

4.   Click  OK  when  you  finish  selecting  HTML  options. 
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The  first  time  you  publish  a  site,  you  must  publish  the  entire  site.  Later,  when  you're 
fixing  problems  or  updating  information,  you  can  publish  only  the  portion  of  the 
site  that  changed. 


Note:  The  site's  files  are  generated  in  the  HTML  output  format  that  you  specify  in  the  Browser 
compatibility  field  of  the  Current  Site  Options  dialog.  See  Chapter  7,  "Controlling 
Published  Output." 

1.   In  Publish  view,  Site  view,  or  Page  view,  click  the  Publish  Site  button  on  the 
control  bar. 


The  Publish  Site  dialog  appears. 


2.  From  the  Publish  files  to  drop-down  list,  choose  Local  Publish  to  specify  your 
local  hard  disk  as  the  destination  for  the  published  HTML  files. 

3.  From  the  Pages  to  publish  drop-down  list,  select  the  portion  of  the  site  you  want 
to  publish: 

♦  Entire  Site.  Publishes  HTML  files  for  all  pages  and  associated  assets  for  the 
site.  Select  Entire  Site  the  first  time  you  publish  a  site. 

♦  Selected  Page  only.  Publishes  the  page  you  select  in  the  SiteStructure.  Usually 
you  use  this  feature  if  you  make  a  change  on  one  page  and  want  to  update 
that  page's  HTML  files.  To  re-publish  a  page,  click  the  arrow  (>>)  to  display 
the  SiteStructure  and  double-click  the  page  you  want  to  re-publish.  The  page 
name  appears  in  the  field. 
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♦  Site  Section  (selected page  is  parent).  Publishes  the  HTML  files  for  a  complete 
section  of  the  site.  Click  the  arrow  (>>)  to  display  the  SiteStructure.  Double- 
click the  base  section  page  of  the  section  you  want  to  publish.  The  section 
name  appears  in  the  field. 


Note:  If  you  add  a  page  to  the  site,  or  change  the  site's  directory  structure  after 

publishing,  make  sure  you  re-publish  the  entire  site  and  not  just  a  site  section 
so  all  the  links  are  updated. 

4.   Select  Publish  changed  assets  only  to  publish  the  asset  files  that  have  changed 
since  the  last  time  you  published  the  site. 


Note:  NetObjects  Fusion  does  not  query  your  hard  disk  to  see  if  it  has  all  the 

unchanged  assets  needed  by  the  site.  If  you  publish  changed  assets  only,  be 
sure  you  publish  to  the  same  location  on  the  hard  disk  that  you  did 
previously,  so  unchanged  assets  are  still  available. 

5.   Click  Publish. 

NetObjects  Fusion  creates  the  local  directories,  converts  the  site  to  HTML,  and 
stores  the  site's  HTML  files  on  the  local  hard  disk. 


Note:  Changes  you  make  to  the  site  while  it  is  being  stored  are  not  included  in  the 
HTML  files  until  you  re-publish  the  page  or  section  containing  the  changes. 

6.  When  publishing  is  complete  and  your  site  is  in  place,  your  browser  opens  so 
you  can  examine  the  results.  You  can  return  to  NetObjects  Fusion,  make 
changes  to  the  site,  and  re-publish  the  site  or  its  changed  portions  as  needed. 

When  the  site  works  perfectly,  you're  ready  to  publish  it  to  your  ISP's  server, 
Web  server,  or  other  server  that  puts  the  site  on  the  Web.  Before  you  can 
publish  to  a  remote  server,  however,  you  need  to  define  a  remote  publish 
profile. 
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Setting  Up  to  Transfer  Files  to  Your  Web  Server 

To  put  your  site  on  the  Web  you  must  transfer  its  HTML  files  and  related  asset  files 
from  your  computer's  local  hard  disk  to  a  server  that  has  access  to  the  Web.  This 
can  be  an  ISP  server  that  you  use  to  access  the  Web,  your  company's  Web  server,  or 
any  other  server  that  gives  you  Internet  access. 

NetObjects  Fusion  uses  the  FTP  process  to  transfer  your  site's  files  to  the  Web 
server.  Therefore,  to  transfer  to  a  remote  Web  server,  your  computer  must  connect 
using  the  FTP  protocol  unless  that  remote  server  is  on  your  company  LAN,  in 
which  case  you  can  use  the  Local  Publish  option. 

Prior  to  transferring  to  the  server  the  first  time,  however,  you  must  set  up  a  profile 
of  the  server  to  receive  the  transferred  HTML  files. 

The  setup  for  a  Web  server  also  applies  to  an  intranet  server.  If  you'll  transfer  a  site 
from  your  hard  disk  to  your  company's  intranet  server  prior  to  transferring  to  the 
Web  server,  use  the  setup  steps  in  this  section  for  both  your  intranet  server  and  Web 
server. 

The  Server  Setup  Process 

To  set  up  a  server  you  select  transfer  options  and  define  a  profile.  After  you  select 
the  appropriate  options  you  don't  have  to  select  them  again.  You  just  transfer  the 
site  from  your  hard  disk  to  the  server(s).  If  you  change  servers,  you  must  select 
options  and  define  a  publish  profile  for  the  new  server. 

The  setup  process  consists  of  selecting  the  directory  structure,  defining  the  server 
profile,  and  selecting  publish  components  if  necessary.  These  settings  are  saved  in 
your  Sitename.nod  file  so  you  don't  have  to  create  a  publish  profile  each  time  you 
want  to  publish  the  site. 

When  setup  is  complete,  you  can  transfer  files  from  a  local  directory  to  the  remote 
server's  location. 

Publish  Profile  Checklist 

Make  sure  you  can  answer  the  questions  in  the  following  checklist  before  you  create 
a  publish  profile  for  a  remote  server. 

1.   Who  is  your  service  provider?  This  is  the  business,  organization,  or  department 
that  is  going  to  store  your  site  on  its  server  and  provide  your  site  visitors  access 
to  it  on  the  Web. 
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The  technical  support  staff  of  your  service  provider  should  be  able  to  provide 
the  answers  to  the  rest  of  these  questions.  Service  providers  and  other 
organizations  that  provide  hosting  services  often  offer  technical  support  pages 
on  their  own  Web  sites. 

2.  What  is  the  name  of  your  FTP  host?  This  is  the  name  of  the  server  that  you  are  going 
to  publish  your  site  to.  It  might  be  the  same  as  your  domain  name,  such  as 
www.yourname.com;  a  name  assigned  by  the  service  provider,  such  as 
inbox./'sp.com;  or  a  specific  IP  address,  a  series  of  four  numbers  separated  by 
periods. 

3.  What  is  your  directory?  When  you  log  on  to  your  remote  host,  you  automatically 
begin  in  the  home  directory  for  your  log-in  account.  This  might  not  be  the  right 
place  to  put  your  site,  however.  For  a  variety  of  reasons,  you  might  need  to 
publish  your  site  in  a  subdirectory  of  your  home  directory. 

You  must  know  the  relative  path  from  your  account's  home  directory  to  the 
base  directory  where  your  site  should  be  stored.  When  NetObjects  Fusion 
publishes  your  site  and  logs  on  to  your  service  provider,  it  stores  your  site's 
pages  and  assets  in  this  base  directory.  You  enter  this  path  statement  as  the 
Directory  in  the  Publish  Settings  dialog. 

You  can  create  a  new  base  directory  below  your  initial  base  directory  to  publish 
and  test  a  site  without  disturbing  your  existing  site.  For  example,  if  the  base 
directory  is  /Sitename/,  you  can  create  a  new  base  directory  as  /S/fename/test/  and 
then  run  the  site  from  that  base  directory  to  test  it. 

However,  the  host  and  base  directory  might  not  look  anything  like  the  URL  that 
your  site  visitors  use  to  access  your  site.  For  security  and  other  reasons,  hosting 
services  frequently  name  their  host  machines  and  user  directories  according  to 
their  own  needs. 


Note:  If  you  have  your  own  domain,  such  as  www.mycompciny.com,  and  are 

logging  in  directly  to  the  account  that  owns  that  domain,  you  might  not  need 
to  specify  a  base  directory,  because  the  home  directory  of  that  account  might 
be  the  same  location  as  the  base  directory. 

4.   What  is  the  name  and  password  for  your  account?  You  need  this  information  so 
NetObjects  Fusion  can  log  on  to  the  server  and  publish  your  site. 
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5.  What  is  the  preferred  name  for  the  default  Home  page?  Your  service  provider 
determines  what  file  name  the  server  displays  by  default  for  each  directory  on 
the  server.  Most  servers  are  configured  to  display  by  default  any  file  named 
index;  others  default  to  home  or  default.  You  must  match  this  preferred  name  in 
the  Advanced  Publish  Settings  dialog  for  remote  server  transfer. 

6.  What  HTML  file  name  extension  does  your  server  support?  Web  page  servers  typically 
support  .html,  .htm,  or.shtml  as  file  name  extensions.  Some  service  providers 
map  one  to  the  other  so  the  server  recognizes  all  of  them;  others  require  you  to 
use  a  specific  one.  You  must  set  the  Advanced  Publish  Settings  dialog  so 
NetObjects  Fusion  transfers  files  with  the  correct  extension.  You  can  also  enter  a 
custom  extension,  if  your  server  supports  it. 

7.  Is  a  specific  port  required  for  upload?  The  service  provider  or  hosting  service  might 
have  designated  a  specific  port  on  the  server  that  it  wants  you  to  use  to  upload 
files.  If  so,  you  must  specify  this  for  NetObjects  Fusion.  See  "Setting  the  Server 
Port  and  Permissions"  on  page  477. 

8.  Does  your  log-in  account  have  the  necessary  permissions?  Servers  use  permission 
configurations  to  control  what  you  are  allowed  to  do  while  logged  on — whether 
you  can  delete  files,  for  example,  or  create  new  directories. 

In  Publish  view,  you  can  specify  the  file  and  directory  structure  that  you  want 
NetObjects  Fusion  to  create  or  use  for  your  site  by  selecting  Arrange  Files  from 
the  Publish  menu.  Your  log-in  account — which  NetObjects  Fusion  uses  to  store 
the  files — must  have  the  server  permissions  necessary  to  create  the  directory 
structure  you  defined. 

If  your  service  provider  does  not  let  you  create  directories,  then  you  must  use 
the  Flat  directory  structure  option  to  transfer  and  store  your  site. 

9.  How  much  server  space  do  you  have?  Before  you  publish  your  site  to  the  Web 
server,  check  the  size  of  the  generated  HTML  files  on  your  hard  disk.  The 
default  location  for  the  files  is  a  folder  named  User  Sites\S/fename\Local  Publish. 

Make  sure  you  include  all  the  subfolders  as  well.  Check  that  the  space  allocated 
on  the  Web  server  can  accommodate  all  the  files  in  the  Local  Publish  folder. 

10.  Does  your  server  have  security  systems  in  place,  such  as  proxies  or  firewalls?  Firewalls 
and  proxy  servers  can  prevent  NetObjects  Fusion  from  uploading  files  properly. 
See  "Publishing  with  Firewalls  or  Proxy  Servers"  on  page  479. 
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Select  the  Directory  Structure 

Many  ISPs,  hosting  companies,  and  Web  servers  require  Web  site  files  to  be 
arranged  in  a  certain  directory  structure.  NetObjects  Fusion  supports  the  three 
most  popular  directory  structures  used  by  ISPs  and  Web  servers,  but  you  should 
check  with  your  service  provider  to  determine  which  structure  to  use. 

If  your  ISP  or  Web  server  has  special  requirements  for  a  site's  directory  structure, 
you  can  customize  the  site  directory  structure  in  Publish  view.  See  "Customizing 
Your  Site's  Directory  Structure"  on  page  470  for  information. 

When  you  publish  your  site  to  a  Web  server,  you  specify  the  directory  structure  of 
your  files  and  assets  on  the  server.  Setting  the  directory  structure  for  your  site  does 
not  change  the  structure  that  the  site  visitor  sees,  nor  does  it  affect  the  links  between 
pages  and  assets.  It  simply  specifies  the  path  names  where  your  pages  and  assets  are 
stored  on  the  server,  and  what  URL  is  required  to  access  them.  For  example,  some 
servers  require  a  one-level  structure,  with  all  pages,  images,  and  other  assets  in  the 
same  directory;  others  let  you  set  up  your  own  directories. 

NetObjects  Fusion  provides  three  pre-configured  directory  structures: 

♦  Flat  for  servers  that  require  all  resources  and  assets  to  be  in  a  single  directory. 
Many  commercial  ISPs  and  hosting  companies  require  this  kind  of  structure. 

♦  Asset  Type  arranges  your  site  contents  into  folders  according  to  their  asset  type. 
This  is  the  default  setting  in  NetObjects  Fusion.  For  example,  if  your  site 
contains  a  typical  mix  of  text  and  media,  a  structure  set  by  Asset  Type  arranges 
your  contents  into  the  structure  shown  below. 

Directory  Structure  

El  Q  assets 
i  £j  bbs 
^  □  html 


♦  Site  Structure  arranges  your  site  contents  into  a  directory  arrangement  that  looks 
like  your  site  in  Site  view: 

-v-  Your  Home  page  and  its  assets  are  stored  in  the  site's  root  directory, 
-v-  Each  first-level  page  is  stored  in  its  own  folder  with  its  assets. 
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<v*  Any  child  page  is  stored  with  its  assets  in  a  subfolder  beneath  the  folder  that 
contains  its  parent  page.  You  determine  the  maximum  number  of 
subfolders  by  setting  the  Number  of  Levels  option. 

For  example,  a  structure  set  with  the  by  Site  Structure  option  would  have  this 
directory  arrangement  on  the  server. 

Directory  Structure 

bbs 

;  Q  Benefits 

;  Q  Job_Fleqs 

!  Q  Personnel 

+  _|  Q  A 


The  Site  Structure  setting  creates  an  efficient  file  structure,  allowing  the  server  to 
load  your  pages  quickly  in  a  site  visitor's  browser.  It  also  provides  an  effective 
directory  structure  for  search  engines,  which  might  index  only  one  page  per 
folder. 

If  you  apply  the  Site  Structure  setting,  shared  assets  are  stored  in  the  deepest 
folder  common  to  all  pages  that  use  that  asset.  This  makes  the  shared  access  to 
those  assets  as  efficient  as  possible. 

To  set  the  directory  structure  for  a  site: 

1.   In  Publish  view,  from  the  Publish  menu,  choose  Arrange  Files. 


Publish 

Preview  Site... 
Publish  Settings... 
Publish  Site... 

1     Arrange  Files  ► 

by  Site  Structure 
1/  by  Asset  Type 
by  Flat 

Properties... 

View/Delete  Server  Contents  ► 
Transfer  Files  to  Server. . . 

Clear  All  Customizations 

Publish  Components. . . 

2.   Choose  by  Site  Structure,  by  Asset  Type,  or  by  Flat.  See  page  459  for  descriptions 
of  the  choices. 
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If  you  want  to  customize  the  structure,  select  the  option  that  produces  the 
structure  similar  to  the  one  you'll  create.  See  "Customizing  Your  Site's 
Directory  Structure"  on  page  470. 

If  you  choose  Site  Structure,  a  dialog  appears  so  you  can  set  the  number  of  levels 
of  subdirectories  for  your  site.  If  Site  Structure  is  already  selected,  choose  it 
again  to  see  this  dialog  and  set  the  levels. 


Click  the  up  and  down  arrows  in  the  dialog  to  set  the  number  of  levels.  Click 
OK. 

3.  If  you  customized  the  directory  structure,  but  want  to  reset  it  to  one  of  the 
menu  options,  choose  Clear  All  Customizations.  The  directory  structure  is  reset 
to  the  option  currently  selected  on  the  Arrange  Files  menu. 

NetObjects  Fusion  removes  custom  folders  and  changes  all  customized  asset 
names  back  to  the  original  names. 

4.  Click  Yes  to  accept  the  new  structure. 

The  directory  structure  is  revised  and  displayed  in  Publish  view. 

Define  Server  Profiles 

Each  Web  server  has  a  name  and  a  set  of  properties  that  define  the  connection 
settings  NetObjects  Fusion  uses  to  publish  your  site  to  that  location  and  server.  You 
can  select  a  server  or  set  its  properties  any  time  before  you  publish.  The  publish 
profile  is  stored  in  the  Sitename.nod  file. 

NetObjects  Fusion  includes  one  default  server  profile,  Local  Publish,  which  is  on 
your  local  hard  disk  in  the  My  Computer\Dr/Ve\NetObjects  FusiorAUser 
Sites\S/'fename\Local  Publish  directory.  See  "Setting  Up  to  Publish  Locally"  on 
page  450  to  modify  the  settings  for  publishing  to  your  local  hard  disk. 
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Publish  Settings 


You  can  modify  the  default  profile,  create  your  own,  or  delete  unneeded  profiles. 
You  can  also  create  a  global  copy  of  a  profile,  which  makes  the  profile  available 
across  different  sites. 

The  information  needed  to  connect  to  a  remote  server  is  specific  to  your  server. 
Contact  your  ISP,  hosting  company,  or  Web  server  administrator  for  the  precise 
information  to  enter  in  these  fields.  For  guidance  on  the  questions  you  need  to  ask, 
see  "Publish  Profile  Checklist"  on  page  456. 

To  define  a  remote  server  profile: 

1.  In  Publish  view,  click  Publish  Settings  on  the  control  bar. 

The  Publish  Settings  dialog  appears.  It  is  the  same  dialog  you  used  to  set  up  your 
local  publish  profile. 

2.  Click  New  profile. 


New  Publish  Profile 

2U 

i  (*  !  Remote 

C  Local 

C  Global  profile: 

1  Office  Server 

J 

|  OK 

Cancel  | 

3.  Select  Remote  or  a  Global  profile  and  click  OK. 

4.  Select  a  profile  from  the  Select  Profile  drop-down  list. 


New  Profile...    |    Remove  Profile...  | 


Profile  Name:  | Remote  Publish 
"  Remote  — 

FTP  Host:  | 

Directory:  |~~ 


User 
name: 


r 

Password:  |~ 


Advanced  publish  settings...         Save  As  Global  Profile...  | 
j      OK     |     Cancel  | 
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Note:  Although  many  ISPs  and  hosting  companies  use  a  single  server  to  receive  FTP 
files  and  provide  Web  hosting,  the  service  you  use  may  have  separate  servers 
for  receiving  FTP  files  and  Web  hosting.  Select  the  FTP  server  to  receive  your 
transferred  files.  Check  with  your  ISP  administrator  for  the  correct  server  to 
select  to  receive  your  files. 

5.  Enter  a  name  that  identifies  the  server  in  the  Profile  Name  box  or  use  the  default 
name. 

6.  Enter  information  in  each  field  in  the  Remote  section. 

♦  FTP  Host  is  the  name  or  IP  number  you  use  to  connect  to  the  remote  server. 
This  can  be  your  site's  domain  name,  the  name  of  an  intranet  server,  or  the 
name  of  your  ISP's  server.  Confirm  this  information  with  your  ISP 
administrator  or  server  administrator. 

♦  Directory  is  the  location  on  the  remote  server  where  your  site's  HTML  files 
are  stored. 

-v-  Leave  this  field  blank  if  your  site's  Home  page  should  be  stored  in  the 
home  directory  of  the  user  ID  or  server  account  that  you  use  to  transfer 
your  site  to  a  remote  server. 

■v-  If  you  want  your  site's  Home  page  to  be  stored  in  a  different  directory 
than  the  home  directory,  enter  the  path  to  the  Home  page  here,  such  as 
/public_html/user. 

For  more  information  about  the  directory  setting,  see  "Publish  Profile 
Checklist"  on  page  456. 

♦  User  name  is  the  name  you  use  to  log  on  to  the  remote  server  so  you  can 
transfer  files  to  it. 

♦  Password  is  the  password  that  authorizes  you  to  access  the  server.  To  publish 
to  the  remote  server,  you  need  server  permissions  for  adding  files  and 
creating  directories.  If  you  do  not  enter  a  password  in  this  box,  a  dialog 
appears  when  you  publish  the  site.  You  enter  the  password  in  that  dialog. 
You  can  also  select  an  option  for  NetObjects  Fusion  to  remember  your 
password  so  you  don't  have  to  manually  enter  it  each  time  you  publish  files. 
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7.   Click  Advanced  publish  settings. 


File  Naming    |  Aliases  |  Advanced  FTP  j 


File  extension  for  HTML  pages:    |  .html 


Home  page  file  name:  |  Index 


3 


I.     OK"   J  Cancel 


8.   Select  the  options  for  your  site. 

♦  Home  page  file  name.  Index  is  the  default  page  name  recognized  by  most  Web 
servers.  Select  Current  Page  Name  to  set  the  Home  page  to  use  the  same 
name  as  in  Site  view.  Select  Home  or  Default  to  set  the  page  as  in  Home.html 
and  Default.html. 

♦  File  extension  for  HTML  pages.  Select  .htm,  .html,  or  .shtml  depending  on  the 
page  extension  your  browser  recognizes.  That  extension  is  applied  to  all 
HTML  files  for  each  page  in  your  site.  Click  the  up  and  down  arrows  to  see 
all  the  options.  To  add  an  extension  to  the  list,  click  the  browse  button. 

Your  service  provider  or  hosting  company  can  tell  you  which  extension  to  use 
for  the  Web  server. 

Make  sure  you  use  a  page  extension  that  your  browser  recognizes  or  it  might  not 
display  the  page  properly.  If  you  used  the  Custom  Name  dialog  in  Site  view  and 
a  file  name  extension  for  an  individual  page,  that  customized  extension 
overrides  the  site  default  for  that  page.  If  pages  do  not  seem  to  publish  with  the 
correct  extension,  custom  names  that  you  applied  to  the  pages  may  be  incorrect. 
Check  the  names  of  the  affected  pages. 

The  Aliases  and  Advanced  FTP  tabs  are  for  advanced  setup  options.  See 
Chapter  30,  "Advanced  Publishing." 

To  create  additional  publish  profiles,  click  New  profile  and  repeat  the  process. 
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To  edit  an  existing  publish  profile,  select  it  from  the  Select  Profile  drop-down 
list,  make  the  changes,  and  click  OK. 

To  delete  an  existing  profile,  select  it  from  the  Select  Profile  drop-down  list, 
click  Remove  profile,  and  click  Yes  to  confirm  deletion. 

9.   Click  OK. 

You're  now  ready  to  publish  your  site. 

Creating  a  Global  Publish  Profile 

NetObjects  Fusion  saves  publish  profiles  with  the  site  you  are  publishing.  If  you 
want  to  use  the  same  profile  to  publish  several  different  sites,  you  can  create  a  global 
copy  of  the  profile,  which  makes  it  available  to  all  the  sites  you  build. 

To  create  a  global  publish  profile: 

1.  Create  a  publish  profile  as  described  in  "Define  Server  Profiles"  on  page  461. 

2.  In  the  Publish  settings  dialog,  click  Save  as  Global  Profile. 
The  Save  Global  Profile  As  dialog  appears. 


x  Save  Global  Profile  As 

X 

j 

Name 

Type 

Home  Server 

Remote 

Local  Publish 

Local 

Profile  name:     | Office  Server 

Remove  |     Cancel   |  |  Save 

3.  In  the  Profile  name  field,  type  a  name  for  the  profile  or  accept  the  name  you 
assigned  in  the  Publish  Settings  dialog. 

4.  Click  Save. 

This  publish  profile  will  be  available  for  use  for  all  sites  you  build. 
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Publishing  Components 

If  you  installed  third-party  Publish  components,  you  can  choose  to  publish  or  not 
publish  them.  These  components  generally  perform  post-publish  processing  of  the 
generated  HTML  files. 

1.  In  Publish  view,  from  the  Publish  menu,  choose  Publish  Components. 

The  Publish  Setup  dialog  appears  with  a  list  of  available  components. 

NetObjects  Fusion  7  does  not  include  Publish  components  by  default,  so  if  you 
do  not  install  third-party  components,  such  as  NetObjects  Fusion  Connector 
for  Macromedia  ColdFusion,  this  dialog  is  blank. 

2.  Select  a  component  to  include  it  with  your  site's  HTML  files  when  they  are 
transferred. 

3.  Click  OK. 

Viewing  a  Server's  Contents 

Prior  to  transferring  files  to  the  server,  you  may  want  to  see  which  files  are  already 
on  the  server  and  the  dates  they  were  modified. 

To  see  a  server's  contents: 

1.  In  Publish  view,  from  the  Publish  menu,  choose  View/Delete  Server  Contents. 

2.  Choose  the  server  you  want  to  review. 

If  you  choose  your  local  hard  disk  or  a  server  on  an  intranet,  the  Local  Publish 
window  opens  and  displays  the  files  and  folders  stored  in  the  local  directory 
created  for  the  site. 

If  you  choose  a  remote  server,  the  Server  Contents  dialog  appears  and  shows  a 
similar  listing.  You  can  delete  files  in  the  Server  Contents  dialog. 

3.  Check  the  folder  and  file  names  and  the  modified  dates  to  determine  which 
folders  and  files  you  want  to  save  or  delete  before  transferring  new  HTML  files 
to  the  server. 
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Transferring  Your  Site  to  the  Web 

To  put  your  site  on  the  Web,  you  transfer  it  to  your  ISP  or  Web  server.  When  the 
publish  process  is  complete,  your  site  is  available  to  the  world. 

To  transfer  your  site's  HTML  files: 

1.   From  the  Publish  menu,  choose  Transfer  Files  to  Server. 
The  Transfer  Files  dialog  appears. 

File  locations  


Transfer  files  from  local  directory: 

Transfer  files  to  remote  server: 
[Remote  Publish  1 


"3  j 


2.  From  the  Transfer  files  from  local  directory  drop-down  list,  select  the  name  of 
the  local  directory  where  you  published  and  saved  the  site's  HTML  files.  This  is 
usually  the  Local  Publish  selection  for  your  local  hard  disk,  or  an  intranet  server 
where  you  initially  generated  the  HTML  files. 

3.  From  the  Transfer  files  to  remote  server  drop-down  list,  select  the  publish 
profile  where  you  want  to  transfer  the  files. 

If  you  need  to  define  a  new  publish  profile  before  transferring  the  files,  click  the 
pencil  icon  next  to  the  drop-down  lists.  The  Publish  Settings  dialog  appears. 

4.  Click  OK. 

NetObjects  Fusion  generates  a  temporary  copy  of  the  site,  connects  to  the 
remote  server  using  the  settings  in  the  publish  profile,  and  uses  its  internal  FTP 
program  to  transfer  the  site's  HTML  files  and  directories  to  the  remote  server, 
using  the  file  and  directory  structure  you  specify. 

While  NetObjects  Fusion  is  transferring  the  published  site  to  the  server,  you  can 
select  a  different  view  and  continue  working.  You  cannot  open  a  different  site. 


Note:  Changes  made  to  the  site  while  it  is  being  transferred  are  not  automatically 
made  in  the  published  version. 
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When  the  transfer  is  complete  and  your  site  is  in  place,  open  it  in  your  browser  and 
examine  the  results. 

That's  it.  Your  site  is  on  the  Web  and  available  for  the  world  to  see. 
See  Chapter  30,  "Advanced  Publishing"  for  more  publishing  options. 
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Advanced  Publishing 

NetObjects  Fusion  provides  a  range  of  advanced  features  to  deal  with  a  variety  of 
Web  publishing  requirements.  For  example,  some  Web  servers  require  special 
directory  structures  to  host  a  Web  site.  In  addition,  some  complex  sites  may  need 
additional  publishing  settings  to  make  the  site  function  properly. 

This  chapter  describes: 

♦  Customizing  your  site's  directory  structure 

♦  Creating  aliased  folders  and  setting  the  cgi-bin  directory 

♦  Setting  the  server  port  and  permissions 

♦  Publishing  special  assets 
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Customizing  Your  Site's  Directory  Structure 

Although  NetObjects  Fusion  offers  three  preconfigured  directory  structures,  you 
might  need  to  customize  your  site's  directory  structure  further.  Customizing  the 
site's  directory  structure  is  usually  only  necessary  if  your  ISP  or  host  server  requires 
a  specific  structure  for  Web  sites.  You  can  customize  the  site's  directory  structure  in 
Publish  view  by  renaming,  rearranging,  or  deleting  site  folders,  creating  custom 
folders,  or  changing  the  publishing  properties  for  folders,  pages,  and  assets. 

A  C  in  the  Attributes  column  of  an  item  in  Publish  view  indicates  the  item  was 
customized.  For  example,  a  directory  with  a  new  name  or  a  file  moved  from  one 
directory  to  a  new  directory  displays  a  Cin  the  Attributes  column. 


Note:  Customizing  your  directory  structure  does  not  change  the  appearance,  design,  or 

content  that  your  site  visitor  sees;  it  only  controls  how  the  pages  and  assets  are  stored 
on  the  server,  and  the  URL  to  access  the  site's  interior  information. 

NetObjects  Fusion  saves  the  customized  directory  structure  in  the  Sitename.nod  file 
so  you  don't  have  to  reconfigure  the  structure  each  time  you  generate  the  site's 
HTML  files  or  transfer  them  to  a  server. 

Creating  a  Custom  Folder 

1.  In  Publish  view,  select  the  folder,  page,  or  asset  where  you  want  to  add  a  custom 
folder,  right- click,  and  select  New  Folder  from  the  shortcut  menu. 

NetObjects  Fusion  adds  a  custom  subfolder  named  New  Folder  below  the 
selected  folder  or  file. 

2.  Enter  a  new  name  for  the  folder  and  press  Enter  or  select  another  object  to 
record  the  folder  name. 

3.  Drag  other  folders  or  files  into  the  custom  folder  as  needed. 
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Renaming  Folders  and  Files 

1.  In  either  pane  of  Publish  view,  right-click  the  folder  or  file  and  select  Rename 
from  the  shortcut  menu. 

2.  Edit  the  existing  object  name  or  enter  a  new  name.  Press  Enter  or  select  another 
object  to  record  the  new  name. 

You  can  rename  auto-generated  folders  and  files  if  they  are  not  locked.  NetObjects 
Fusion  auto-generates  names  of  images  that  you  modify  in  Page  view.  For  example, 
if  you  crop  an  image  or  set  it  to  be  transparent,  NetObjects  Fusion  auto-generates  a 
new  name  for  the  altered  image.  Auto-generated  image  names  are  in  the  format  of 
a_filename.ext  where  a  stands  for  auto-generated,  filename  is  the  name  of  the  original 
image,  and  ext  is  the  extension  of  the  image,  .gif  or  jpg.  Auto-generated  image 
names  only  appear  in  Publish  view. 

NetObjects  Fusion  remembers  the  new  names  the  next  time  you  generate  the 
HTML  files  for  your  site.  Any  folder  or  file  that  you  rename  is  considered 
customized.  If  you  name  a  customized  folder  with  a  name  used  by  an  auto- 
generated  folder,  it  is  still  treated  as  a  customized  folder. 

Aliased  folders  are  also  considered  customized  folders.  Publish  view  displays  them 
in  the  directory  structure,  even  if  they  are  empty,  and  tracks  their  name  and 
location  in  the  event  you  change  them.  See  "Creating  Aliased  Folders  and  Setting 
the  CGI-Bin  Directory"  on  page  474. 

By  definition  you  cannot  change  read-only  assets,  such  as  script  files  and  directory 
files  used  by  NetObjects  Fusion  Components.  NetObjects  Fusion  ignores  attempts 
to  move  or  rename  read-only  files.  An  R  attribute  and  lock  symbol  in  the  directory 
structure  indicate  a  read-only  file. 

Deleting  Folders 

1 .  In  either  pane  of  Publish  view,  click  the  folder  you  want  to  delete  and  make  sure 
it  is  empty.  You  cannot  delete  a  folder  until  it  is  empty,  and  you  cannot  delete 
pages  or  assets  in  Publish  view. 

2.  Right-click  the  folder  and  select  Delete  Folder  from  the  shortcut  menu. 
NetObjects  Fusion  deletes  the  folder. 
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Rearranging  the  Directory  Structure 

D  In  either  pane  of  Publish  view,  click  the  folder,  page,  or  asset  you  want  to  move 
and  drag  it  to  its  new  location. 

NetObjects  Fusion  moves  the  object  and  updates  all  references  and  links  to  it. 

If  you  move  pages,  NetObjects  Fusion  remembers  their  new  locations,  but  might 
continue  to  auto-generate  folders  needed  to  contain  that  page's  assets.  Components 
and  their  related  assets  have  a  black  lock  image  on  their  icons,  signifying  that  they 
cannot  be  renamed  or  rearranged. 

Viewing  and  Setting  Publishing  Properties 

In  addition  to  their  other  properties,  your  site's  folders,  pages,  and  assets  have 
publishing  properties  that  indicate  or  control  the  way  they  are  included  in  your 
published  site. 

Three  of  these  publishing  properties  indicate  the  publishing  status  for  that  folder, 
page,  or  asset: 

♦  Folders,  pages,  and  assets  that  were  renamed  or  moved  from  their  default 
location  have  a  customized  publication  property.  Customized  assets  display  a  C 
in  the  Attributes  column  in  Publish  view,  and  a  checkmark  in  the  Customized 
option  in  the  Attributes  section  of  the  Properties  dialog.  To  see  the  Properties 
dialog  for  a  customized  asset,  select  the  asset  in  either  pane  of  Publish  view  and 
from  the  Publish  menu,  choose  Properties. 

♦  Some  folders,  pages,  and  assets  are  marked  read-only: 

■v-  Assets  created  by  NetObjects  Fusion  components  such  as  Site  Mapper. 

■v-  Dependent  Java  .class  files  that  were  added  to  the  site's  assets.  When  you  add 
a  Java  object  and  preview  or  publish  your  site,  NetObjects  Fusion  analyzes 
the  object's  .class  file  to  see  if  it  calls  for  other  .class  files;  if  so,  those 
dependent  .class  files  are  added  as  read-only  assets. 

Read-only  assets  display  an  R  in  the  Attributes  column  in  Publish  view,  and  a 
check  in  the  Read-only  option  of  the  Properties  dialog. 

♦  Pages  and  assets  have  two  published  date  properties  that  display  the  latest 
publication  date  in  both  the  Last  Remote  Publish  and  Last  Local  Publish 
columns  of  Publish  view. 


472 


Chapter  30    Advanced  Publishing 


-v-  If  an  asset  was  never  published  locally  or  remotely,  it  displays  Never 

Published  in  red  in  the  appropriate  column,  and  has  a  check  in  the  Needs 
publishing  option  of  the  publication  Properties  dialog.  HTML  files  always 
appear  in  red. 

■v-  If  an  asset  was  changed  since  the  last  time  it  was  transferred  to  the  server,  it 
displays  the  Last  Published  date  in  red,  and  has  a  check  in  the  Needs 
publishing  option  of  the  publication  Properties  dialog.  If  you  select  Publish 
changed  assets  only  when  you  publish  this  site,  the  assets  with  red  dates  are 
republished  to  the  server.  Pages  always  appear  red  because  they  are  always 
republished  unless  you  specifically  choose  not  to  publish  a  page. 

To  see  the  publication  properties  of  a  folder,  page,  or  asset  listed  in  Publish  view: 

1.  Right-click  the  item. 

2.  Select  Properties  from  the  shortcut  menu. 

The  Properties  dialog  for  the  selected  item  appears. 


Properties  i 

General  1 

Type:            HTML  Page 

Last  publish  date:  Never  Published 

Attributes:       |~  Read-only         l~~  Don't  publish 

V  Customized       W  Needs  publishing 

|      OK      |       Cancel  | 

Suppressing  a  Page  or  Asset  from  the  Published  Site 

You  can  also  suppress  publishing  for  a  selected  page  or  asset  by  setting  its  Don't 
publish  property.  If  you  set  this  property,  NetObjects  Fusion: 

♦  Overrides  the  Needs  publishing  or  Publish  changed  assets  setting  for  this  page 
or  asset. 
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♦  Displays  a  diagonal  red  slash  mark  through  the  page  or  file  icon  in  Publish  view 
and  adds  a  D  to  its  Attribute  column. 

♦  Publishes  the  site  without  that  page  or  asset. 
To  suppress  publishing  for  a  page  or  asset: 

1.  In  Publish  view,  right-click  the  page  or  asset  and  choose  Properties  from  the 
shortcut  menu. 

The  Properties  dialog  appears. 

2.  Select  Don't  publish,  then  click  OK. 

NetObjects  Fusion  displays  a  red  slash  through  the  page  or  asset  icon  and 
suppresses  it  from  the  site  when  published. 

To  re-enable  publishing  for  a  suppressed  page  or  asset,  repeat  step  1,  clear  Don't 
publish,  and  click  OK. 


Note:  This  Don't  publish  command  is  not  the  same  as  the  Don't  publish  command  in  Site 
view.  Selecting  the  Don't  publish  command  in  Site  view  eliminates  the  pages  and  all 
links  to  it  from  the  published  site.  In  Publish  view,  the  Don't  publish  command  does 
not  eliminate  the  page  from  the  published  site.  The  page  is  simply  not  generated  again 
and  not  recopied  to  the  site.  The  page  and  all  links  to  it  remain.  The  images  and  assets 
of  the  page  may  be  republished,  but  the  page  will  not. 

Creating  Aliased  Folders  and  Setting  the  CGI-Bin 
Directory 

Sometimes  you  need  to  store  certain  assets  of  your  site  in  a  location  separate  from 
the  rest  of  your  site.  For  example: 

♦  You  can  link  to  programs  such  as  CGI  scripts  or  other  executables  that  have  to 
be  placed  in  a  specific  CGI  directory  so  they  run  properly. 

♦  You  can  place  an  order  form  or  other  pages  in  a  secure  location  that  requires 
authorized  access,  without  restricting  access  to  the  rest  of  your  site. 

♦  You  can  link  to  images  or  other  assets  that  are  maintained  or  controlled  by 
others,  and  stored  in  a  protected  location. 


Note:  You  cannot  do  this  with  NetObjects  Fusion's  Form  Handler  component. 
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To  do  this,  you  create  alias  folders,  using  a  process  in  which  you  define  two 
locations:  the  actual  physical  location  on  your  Web  server  where  you  want  to 
transfer  the  pages  or  assets,  and  the  URL  or  logical  address  that  you  want 
NetObjects  Fusion  to  use  when  referring  to  that  object.  On  some  servers,  this  is 
referred  to  as  creating  virtual  folders. 

After  the  site  is  transferred  to  the  Web  server,  you  or  your  server  administrator 
must  configure  the  server  to  look  in  the  FTP  location  for  assets  that  are  described  as 
being  in  the  URL  location.  For  example,  your  site  might  include  several  stock 
images  from  your  company's  marketing  department,  such  as  the  company  logo  and 
other  approved  artwork.  When  you  create  your  site,  you  use  copies  of  the  artwork 
that  you  stored  on  a  local  disk.  When  you  transfer  your  site's  HTML  files  to  the 
company  server,  however,  you  want  to  use  the  "official"  images  that  have  been 
approved  and  maintained  by  the  marketing  department. 

Check  with  your  server  administrator  to  see  if  your  site  contents  or  remote  server 
configuration  requires  a  CGI  directory  or  other  aliases. 

To  specify  the  CGI-BIN  directory: 

1 .  In  Publish  view,  click  Publish  Settings  on  the  control  bar. 
The  Publish  Settings  dialog  appears. 

2.  Choose  a  profile  from  the  Select  Profile  drop-down  list. 

3.  Click  Advanced  publish  settings. 

The  Advanced  Publish  Settings  dialog  appears. 

4.  Click  the  Aliases  tab. 


Advanced  Publish  Settings 


File  Naming     Aliases  |  Advanced  FTP  j 
URL  Path  FTP  Path 


New  Alias...  |  E dit  Alias. . . 
CGI  Alias:  |~ 


Delete  Alias  | 


□  K     |  Cancel 
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5.   Enter  the  FTP  path  where  CGI  scripts  are  stored  in  the  CGI  alias  field.  This 
establishes  an  alias  to  the  executable  directory  on  the  server  where  CGI  scripts 
are  kept. 

To  create  other  aliased  folders: 

1.  In  Publish  view,  arrange  the  directory  structure  for  your  site  the  way  you  want  it 
to  appear  on  your  server. 

2.  Isolate  the  pages  or  assets  you  want  to  store  in  an  aliased  location  into  one 
branch  of  the  directory  structure,  under  a  common  parent  folder.  If  necessary, 
create  a  custom  folder  for  each  set  of  aliased  content. 

If  your  site  requires  more  than  one  alias — such  as  one  alias  for  secure  pages  and 
another  alias  for  protected  assets — you  can  create  more  than  one  custom  folder. 

3.  Drag  pages  and  assets  into  the  appropriate  custom  folder(s)  as  needed. 

4.  Click  Publish  Settings  on  the  control  bar. 
The  Publish  Settings  dialog  appears. 

5.  Choose  a  profile  from  the  Select  Profile  drop-down  list. 

6.  If  necessary,  make  changes  to  that  profile. 

7.  Position  the  Publish  Settings  dialog  so  you  have  a  clear  view  of  the  Contents  of 
directory  pane  in  Publish  view.  Refer  to  the  directory  structure  to  make  sure  you 
type  the  URL  to  your  custom  folder  correctly. 

8.  Click  Advanced  publish  settings  and  then  click  the  Aliases  tab. 

9.  To  add  a  new  alias,  click  the  New  Alias  button.  To  edit  an  existing  alias,  select  it 
from  the  list,  then  click  the  Edit  Alias  button. 

The  New  Alias  (or  Edit  Alias)  dialog  appears. 


URL  Path:  || 
FTP  Path:  |~~ 


Cancel  | 


10.  Enter  the  absolute  or  relative  path  from  your  site's  root  folder  to  the  custom 
folder  containing  the  aliased  pages  and  assets  as  the  URL  Path. 
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Refer  to  the  directory  panel  as  needed  to  enter  the  path  exactly  as  it  appears, 
including  the  use  of  uppercase  and  lowercase  names  and  spaces.  For  example,  if 
you  create  a  custom  folder  called  Companypix  and  place  it  under  your  Assets 
folder,  the  URL  Path  would  be./Companypix. 

1 1 .  Enter  the  FTP  path  that  you  want  to  use  to  actually  store  that  folder  and  its 
contents.  This  FTP  location  must  be  on  the  same  server  as  the  rest  of  the  site 
because  your  publish  profile  only  logs  onto  one  server  at  a  time. 

12.  Click  OK. 

13.  To  add  additional  aliases,  click  New  Alias  again  and  repeat  the  process. 

When  you  publish  your  site,  NetObjects  Fusion  keeps  all  links  and  references  to 
your  aliased  content  pointing  toward  the  URL  path,  but  actually  stores  the  pages 
and  assets  in  the  FTP  location  you  specified. 


Note:  The  server  must  be  configured  to  support  this  alias.  This  is  a  system  administrator  task 
outside  of  NetObjects  Fusion,  so  you  or  your  server  administrator  must  define  the  alias 
on  the  server. 

Setting  the  Server  Port  and  Permissions 

Depending  on  your  Web  server  configuration,  you  might  need  to  set  specific 
permissions  or  a  specific  port  so  your  Web  server  software  can  access  your  site's 
HTML  files.  Setting  permissions  might  override  the  default  permissions  normally 
set  by  NetObjects  Fusion.  The  permission  settings  only  apply  to  FTP  servers  that 
support  the  CHMOD  command.  Windows  IIS  servers  do  not  support  the  CHMOD 
command,  therefore  to  change  the  permissions  on  a  Windows  IIS  server,  see  your 
server  administrator. 

To  set  the  server  port  and  permissions: 
I  1 .   In  Publish  view,  click  Publish  Settings  on  the  control  bar. 

0 

 "  The  Publish  Settings  dialog  appears. 

Publish  Settings 

2.   Choose  a  profile  from  the  Select  Profile  drop-down  list. 
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3.   Click  Advanced  publish  settings  and  then  click  the  Advanced  FTP  tab. 


■  Advanced  Publish  Settings  [™ 


File  Naming    ]  Aliases    Advanced  FTP  j 

These  options  are  for  advanced  users  only.  Please  check  with  your  network 
administrator  or  Internet  Service  Provider  before  changing  any  of  these  values. 

Server  port:  [21  Default  Permissions:  [O 

I-  Connect  passive  mode 
Click  here  to  reset  values  to  default  settings 


|      OK      |  Cancel 


4.   Select  options  for  the  Advanced  FTP  settings: 

♦  Server  port  is  the  port  from  which  your  server  accepts  FTP  connections.  By 
default  the  port  setting  is  21,  which  is  the  most  common  ISP  setting. 
However,  some  security  systems  or  other  server  configurations  may  require 
a  different  setting.  Check  with  your  ISP  administrator  for  the  proper  server 
port  setting. 

♦  Default  Permissions  applies  to  servers  that  support  the  CHMOD  FTP 
command,  which  covers  read,  write,  and  execute  permissions.  By  default, 
this  setting  is  0  (zero),  which  corresponds  to  no  permissions.  Check  with 
your  ISP  administrator  or  server  administrator  to  see  if  the  server  supports 
the  CHMOD  command  and,  if  it  does,  which  setting  you  need.  Note  that  the 
setting  applies  to  all  files  and  folders  uploaded  to  the  server.  You  cannot  set 
some  files  or  folders  to  one  set  of  permissions  and  others  to  different 
permissions. 

♦  Connect  passive  mode  is  for  publishing  to  servers  not  within  your  company's 
firewall,  or  if  your  ISP  or  host  company's  FTP  manager  establishes 
connections  using  passive  mode.  Passive  mode  (or  PASV)  is  a  security  mode 
in  which  a  client  sends  a  connect  signal  for  data,  the  server  replies  with  a 
confirmation  signal,  and  then  the  data  begins  uploading.  This  allows  the 
server  to  confirm  the  identity  of  the  client  that  is  connecting  before  data 
begins  uploading.  Although  some  firewalls  allow  PASV  as  a  security  mode, 
others  may  not  be  configured  for  PASV.  In  that  case,  publishing  will  not 
work.  Typically,  NetObjects  Fusion  cannot  publish  through  firewalls  or 
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proxies.  If  a  message  tells  you  that  NetObjects  Fusion  cannot  connect  to  the 
server,  the  problem  is  usually  a  firewall  preventing  you  from  logging  on. 
Also,  in  some  cases  of  publishing  to  a  proxy  server,  the  publishing  process 
appears  to  succeed  but  the  files  do  not  appear  on  your  site. 

5.   Click  OK. 

Publishing  with  Firewalls  or  Proxy  Servers 

If  you  develop  sites  behind  a  firewall  and  need  to  publish  to  a  remote  server  that  is 
outside  the  firewall,  you  might  be  able  use  FTP  passive  mode  to  connect  to  the 
server. 

1 .  In  Publish  view,  click  Publish  Settings  on  the  control  bar. 

2.  Choose  a  profile  from  the  Select  Profile  drop-down  list. 

3.  Click  Advanced  publish  settings  and  then  click  the  Advanced  FTP  tab. 

4.  Select  Connect  passive  mode. 

5.  Click  OK. 

If  the  reverse  is  true  and  your  remote  server  is  behind  a  firewall  or  stored  on  a  proxy 
server,  NetObjects  Fusion  cannot  publish  directly  to  the  server.  If  that's  the  case, 
follow  these  steps: 

1 .  Publish  your  site  to  a  local  folder  other  than  the  \S/fename\Preview  folder  of  your 
site.  Use  whatever  directory  structure  and  HTML  output  method  you  would 
normally  use.  The  default  setting,  Local  Publish,  publishes  to  the  folder 
\Sitename\loca\  Publish. 

2.  Consult  with  your  server  administrator  for  the  preferred  method  of  transferring 
content  to  the  remote  server.  Potential  methods  include: 

♦  Transferring  the  entire  directory  structure  of  the  local  site  to  a  holding 
location  on  an  unprotected  server,  so  an  authorized  administrator  can  then 
transfer  the  site  to  the  protected  location. 

♦  Using  an  FTP  application  such  as  WS-FTP  or  other  means  of  access 
authorized  by  the  server  administrator  to  transfer  the  entire  directory 
structure  of  the  local  site  to  the  protected  server. 

♦  Installing  Personal  Web  Server  (PWS)  and  remotely  publishing  to  it.  Then 
you  send  the  site's  files  via  FTP  from  PWS  to  the  server. 
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Whichever  method  you  use,  be  sure  to  transfer  all  files  and  to  duplicate  the  local 
folder  structure  precisely. 

Publishing  Special  Assets 

When  you  transfer  your  site  to  the  Web  server,  NetObjects  Fusion  transfers  the 
entire  site  to  the  designated  location,  including  special  assets  you  tell  it  to  manage. 
These  special  assets  include  things  like  Java  classes,  images  and  assets  contained  on 
external  HTML  pages,  and  CGI  scripts.  The  list  of  managed  assets  included  in  your 
published  site  is  displayed  in  Assets  view. 

When  you  transfer  the  site's  files  to  the  Web  server,  you  can  use  any  of  three 
methods  to  ensure  that  the  special  assets  are  included  in  your  site's  managed  assets. 

♦  Include  the  assets  when  you  add  the  object  that  refers  to  them.  For  example: 

0-  If  you  reference  external  HTML  pages  using  the  External  HTML  tool, 
NetObjects  Fusion  analyzes  the  external  pages  and,  if  it  finds  assets  in  the 
external  pages,  includes  those  assets  in  Assets  view. 

0-  If  you  add  Java  objects  to  your  pages  using  the  Java  tool,  NetObjects  Fusion 
analyzes  their  .class  files  and  adds  other  .class  files  referenced  there.  If  you 
listed  additional  files  on  the  Java  Properties  palette,  NetObjects  Fusion 
includes  them  as  managed  assets.  See  "Inserting  a  Java  Applet  or  Servlet"  on 
page  306. 

♦  You  can  reference  an  asset  in  a  file  link  and  NetObjects  Fusion  manages  and 
publishes  the  asset.  See  "Creating  a  File  Link"  on  page  281. 

♦  You  can  explicitly  add  any  special  asset  to  Assets  view  and  select  Always  publish 
file  to  ensure  that  NetObjects  Fusion  manages  and  publishes  the  asset.  If  you 
select  Always  publish  file  and  do  not  move  the  file  in  Publish  view,  and  then 
only  publish  a  section  of  the  site,  NetObjects  Fusion  places  this  asset  at  the  root 
of  the  site.  See  "Adding  a  File  Asset"  on  page  434. 

Managing  Script  Assets 

NetObjects  Fusion  does  not  analyze  custom  scripts  that  you  add  to  pages, 
MasterBorders,  or  other  objects.  If  those  scripts  reference  special  assets,  they  are  not 
automatically  included  in  the  site's  managed  assets.  To  have  NetObjects  Fusion 
manage  and  publish  assets  called  in  custom  scripts,  you  must  create  file  links  to 
those  assets,  or  explicitly  add  them  to  Assets  view. 
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When  you  add  the  file  asset,  select  Always  publish  file  to  ensure  that  the  asset  is 
marked  In  Use.  After  publishing  the  first  time,  you  can  clear  this  setting  if  you  only 
publish  changed  assets. 

Scripts  have  very  specific  calls  to  those  files,  generally  ./imagename.gif,  image.gif,  or 
images/imagename.gif  for  images  and  cgi-bin/form.cgi,  complete  http  path  to  form.cgi, 
or  ./form.cgi  for  .exe  files. 

♦  When  you  add  an  asset  and  the  directory  structure  is  set  to  by  Asset  Type,  the 
added  asset  is  always  added  to  the  assets/images  folder. 

♦  If  you  add  an  asset  and  the  directory  structure  is  set  to  by  Site  Section,  the  added 
asset  is  always  placed  in  the  root  if  it  is  an  image,  or  in  the  existing  cgi-bin  if  it  is 
an  .exe. 

♦  If  the  directory  structure  is  set  to  by  Flat,  the  asset  is  added  to  the  root. 

Be  sure  to  move  the  added  asset  to  the  correct  location  in  Publish  view  so  the  file  is 
published  to  the  correct  location  on  the  server. 
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Working  with  Character  Sets 

In  the  past,  most  computers  used  the  same  character  set  to  represent  upper  and 
lowercase  English  language  letters,  number  characters,  and  punctuation  characters. 
This  character  set  is  known  as  ASCII.  However,  ASCII  is  a  very  limited  character  set, 
unable  to  support  a  variety  of  alphabets.  To  accommodate  computer  users 
worldwide,  different  character  sets  were  developed.  These  new  character  sets  are 
often  identified  by  a  number,  such  as  code  page  850  or  ISO-8859-1. 

Character  sets  are  composed  of  code  points,  which  are  the  numbers  assigned  to 
characters  that  the  computer  uses  to  identify  the  character.  For  example,  in  ASCII, 
when  you  type  a  capital  A,  the  computer  sees  its  code  point,  which  is  the  number 
65;  if  you  type  a  B,  the  computer  sees  a  66.  Both  the  code  page  850  and  the  ISO- 
8859-1  character  sets  include  accented  characters,  but  850  uses  the  code  point  130 
for  the  character  e,  and  8859-1  uses  233  for  the  same  character.  To  eliminate  this 
confusion,  an  effort  is  underway  to  create  a  universal  character  set  that  includes 
every  character  from  every  language.  This  character  set  is  called  Unicode. 

Characters  display  correctly  in  NetObjects  Fusion  because  they  are  stored  in 
Unicode.  When  NetObjects  Fusion  publishes  or  previews  a  page,  it  converts  the  text 
from  Unicode  to  the  character  set  selected  for  the  site  or  for  the  individual  page. 

Suppose  you  type  Greek  characters  on  a  page,  set  the  page  character  set  to  Western 
European  (ISO-8859-1),  and  preview  the  page.  Because  their  particular  code  points 
do  not  have  equivalents  in  the  Western  European  character  set,  the  Greek 
characters  may  appear  as  question  marks.  If  you  want  to  guarantee  that  the  Greek 
characters  on  the  NetObjects  Fusion  page  display  correctly  when  you  preview  or 
publish,  you  should  choose  a  character  set  that  includes  Greek  characters.  This 
character  set  is  then  inserted  in  the  charset  parameter  in  the  generated  HTML 
META  tag,  which  tells  the  browser  how  to  interpret  and  display  the  characters. 

If  you  have  a  page  that  contains  languages  that  use  different  character  sets,  for 
example,  English  on  the  right  and  Greek  on  the  left,  to  guarantee  that  all  characters 
will  be  interpreted  correctly  by  the  browser,  you  can  use  Unicode  (UTF-8)  or  two- 
byte  Unicode  (UCS-2)  as  a  character  set  for  the  page.  Remember  that  Unicode  is 
evolving;  it  is  not  complete  yet,  but  it  does  include  code  points  for  most  characters 
in  languages  commonly  used  on  computers  today.  Note  that  only  Netscape  4.x  and 
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Microsoft  Explorer  4.0  and  up  currently  support  UTF-8,  and  only  the  most  recent 
versions  of  Netscape  and  Microsoft  Explorer  support  UCS-2. 

Available  Character  Sets 

The  following  character  sets  are  included  with  NetObjects  Fusion: 

♦  Baltic  (CP- 1257) 

♦  Central  European  (ISO-8859-2) 

♦  Central  European  (Windows- 1250) 

♦  Chinese  Simplified  (GB2312) 

♦  Chinese  Traditional  (BIG5) 

♦  Cyrillic  (ISO-8859-5) 

♦  Cyrillic  (K018-R) 

♦  Cyrillic  (Windows-1251) 

♦  Greek  (ISO-8859-7) 

♦  Greek  (Windows-1253) 

♦  Japanese  (EUC-JP) 

♦  Japanese  (ISO-2022-JP) 

♦  Japanese  (SHIFT JIS) 

♦  Korean  (KSC5601) 

♦  Turkish  (ISO-8859-9) 

♦  Turkish  (Windows- 1254) 

♦  Unicode  (UCS-2) 

♦  Unicode  (UTF-7) 

♦  Unicode  (UTF-8) 

♦  Western  European  (CP437) 

♦  Western  European  (CP850) 

♦  Western  European  (ISO-8859-1) 

♦  Western  European  (ISO-8859-15) 

♦  Western  European  (Windows- 1252) 

The  following  character  sets  are  not  included  with  NetObjects  Fusion,  but  are 
supported  once  installed  in  your  operating  system.  You  can  download  language  kits 
at  www.microsoft.com  or  install  them  from  your  Windows  NT  installation  disks. 

♦  Western  European  (CP-437) 
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♦  Western  European  (CP-850) 

♦  Central  European  (CP-852) 

♦  Cyrillic  (CP-866) 

♦  Greek  (CP-869) 

♦  Greek  (CP-737) 

♦  Turkish  (CP-857) 


Setting  the  Site's  Character  Set 

1.  In  any  view,  from  the  Tools  menu,  choose  Options> Current  Site. 

2.  On  the  General  tab  of  the  Current  Site  Options  dialog,  select  a  character  set 
from  the  Character  set  drop-down  list. 


Current  Site  Options 


General  |  META  tags  |  History  |  Backup  | 

Site  name:    new  site 
SiteStyle:    Phoenix  Teal 
Number  of  pages:  4 

Defaults  

Browser  compatibility: 

|Dynarnic  Page  Layout  -  All  browsers 

New  page  size: 


Change... 


Height:  |540 
Character  set: 


Width:    1 760 


| Western  European  (IS 0-8853-1) 


~3 


Text  formatting  

f*  HTML  (~  Cascading  S  tyle  S  heets  (CS  S ) 


Quote  type:  |  Curly  Quotes 
HTML  Options...  | 


] 


To  ensure  that  characters  display  properly: 

1.  Load  a  localized  operating  system.  For  example,  for  a  Cyrillic  site,  you  must  use 
a  Cyrillic  OS. 

2.  Set  the  site's  character  set. 

3.  Change  the  font  for  each  SiteStyle  element  on  the  Graphics  tab.  This  includes 
banners,  buttons,  and  so  on. 
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4.   Publish  the  site  to  see  the  correct  characters  in  NetObjects  Fusion  and  the 
browser. 

If  you  type  characters  that  are  not  included  in  the  selected  character  set,  when  you 
preview  or  publish  the  page,  you  might  see  question  marks  in  place  of  unknown 
characters. 

Setting  the  Character  Set  for  an  Individual  Page 

You  can  override  the  default  site  character  set  and  choose  a  different  character  set 
for  individual  pages. 

1.  In  Page  or  Site  view,  right-click  on  the  page  and  select  Page  Character  Set  from 
the  shortcut  menu. 

2.  Select  a  character  set  for  the  page  from  the  Page  Character  Set  drop-down.  This 
character  set  will  be  applied  only  to  this  page. 


1  Character  Set 

Site  character  set: 

Western  European  (IS 0-8859-1) 

Page  Character  Set: 

Use  Site  Character  Set 

Use  S'\Xe  Character  Set 

Baltic  (Windows-1 257) 
Central  European  (CP852) 
Central  European  (IS 0-8859-2) 
Central  European  (Windows-1 250) 
Chinese  Simplified  (GB231 2) 
Chinese  Traditional  (BIG 5) 
Cyrillic  (CP866) 
Cyrillic  II SO -8858-5] 

Setting  the  Character  Set  for  a  Section 

1.  Go  to  Site  view  and  select  a  section. 

2.  Right-click  the  parent  page  of  the  section  and  select  Section  Character  Set  from 
the  shortcut  menu. 
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3.   Select  a  character  set  for  the  section  from  the  Section  Character  Set  drop-down. 


Character  Set 


Site  character  set:    Western  European  (I  SO -8859-1] 


Section  Character  Set:     Use  Site  Character  Set 


Use  Site  Character  Sei 


Baltic  (Windows-1 257) 
Central  European  (CP852) 
Central  E  uropean  (I  S  □  -8859-2) 
Central  European  (Windows-1 250) 
Chinese  Simplified  (GB231 2) 
Chinese  Traditional  (BIGS) 
Cyrillic  (CP866) 

Cyrillic  [ISQ-9959-51   


Setting  the  Character  Set  for  Imported  Pages 

When  you  import  a  site  into  NetObjects  Fusion,  you  must  ensure  that  it  has  the 
correct  character  set  before  you  begin  the  import. 

1.  From  the  Tools  menu,  choose  Options> Application. 

2.  In  the  Application  Options  dialog,  click  the  International  tab. 

3.  In  the  Imported  HTML  section  of  the  dialog,  select  a  character  set  for  imported 
text  from  the  drop-down  list. 


Imported  HTML  

Imported  tent  uses  character  set: 


Specified  in  imported  Meta  tag 


Baltic  (Windows-1 257) 
Central  European  (CP852) 
Central  European  (IS 0-8859-2) 
Central  European  IWindO'/-Js-1 250 j 


1 


If  you  know  the  HTML  pages  in  the  site  you  are  importing  have  the  appropriate 
character  set  specified  in  the  META  tag,  you  can  use  the  Specified  in  imported 
Meta  tag  setting.  If,  however,  you  know  the  site  is  in  Greek  and  the  correct 
character  set  is  not  specified  in  the  META  tag,  then  before  importing  you  should 
choose  an  appropriate  character  set  from  the  drop-down  list. 

If  there  is  no  character  set  specified  in  the  META  tag,  and  you  forget  to  set  the 
correct  character  set  before  importing,  NetObjects  Fusion  assigns  the 
ISO-8859-1  character  set. 
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URL  and  Page  Name  Character  Requirements 

The  characters  in  a  URL  are  limited  to  those  represented  in  lower  ASCII,  which 
includes  uppercase  and  lowercase  English  letters,  numbers,  and  common  English 
punctuation.  You  cannot  use  accented  characters  or  other  special  characters  in  a 
URL. 

You  can,  however,  name  pages  using  accented  characters.  The  names  on  the  banner 
and  buttons  display  in  the  correct  international  form.  In  Publish  view,  however,  file 
names,  page  names,  and  folders  change  to  names  with  unaccented  characters. 

For  Japanese,  NetObjects  Fusion  uses  the  ASCII  characters  that  are  normally 
converted  to  a  Japanese  character.  For  other  Asian  languages,  a  numeric  file  name  is 
assigned.  For  European  languages,  NetObjects  Fusion  strips  out  the  accents;  the 
words  look  the  same  but  without  accents.  For  example,  if  you  name  a  page  ete  in 
Site  view,  in  Publish  view  it  is  listed  as  ete.html. 
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Index 

A 

A  HREF  349 
Action  icon  72 
actions  313 

action  messages  314, 318 

adding  to  objects  315 

adding  to  text  320 

assigning  to  banners  266 

assigning  to  navigation  bars  255 

button  rollover  example  330 

cascading  324 

cascading  message  example  333 

collision  detection  example  332 

custom  message  example  332, 333, 335 

custom  messages  322 

customizing  Set  Action  dialog  339 

deactivating  326, 329, 338 

delay  example  336 

deleting/modifying  326 

dragging  example  332 

examples  330 

parameters  319,328 

reordering  326 

restrictions  with  frames  313 

scripting  your  own  327, 328 

slide  show  example  335 

targets  314,317,324 

trigger  events  314, 316 
ActiveX  controls  311 
Ad  Banner  component  372 
Adobe  Acrobat  PDF  files  302 
Advanced  toolbar  77 
aif  files  299 

aliased  folders  471,474 
aligning 

objects  83 

text  170 


alt  tags 

adding  and  modifying  80 
Anchor  icon  71,276 
anchors 

adding  275 

deleting  275, 276 

editing  275, 276 

external  HTML  349 

see  also  links 
animated  .gif  files  178 

SiteStyles  245 
animation,  see  video  files  297 
APPLET  CODE  350 
application  options 

international  24 

preview  22 

updates  26 
Application  Options  dialog 
arrows,  see  lines 

asset  type  directory  structure,  publishing  459 
assets 

custom  HTML  409 

custom  names  435 

customized  472 

data  objects  442 

displaying  pages  containing  file  assets  436 

displaying  pages  containing  links  441 

editing  80 

file  433 

file  types  433 

import  limitations  63 

links  439 

managing  external  HTML  349 
managing  script  480 
publishing  external  HTML  351 
publishing  special  480 
reusing  79 
unmanaged  351 
variables  443 

see  also  file  assets,  links,  variables 
Assets  folder  17 
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Assets  view  8, 432 
au  files  299 
audio  file  formats  298 
Auto  save  preference  20 
auto  updates  26 
AutoFrames  133 
adding  134 

adding  HTML/scripts  416,420 
browser  refresh  140 
defined  131 
optimizing  layout  98 
padding  137 
properties  137 

removed  from  MasterBorders,  effect  on 
HTML  417 

selection  sequence  135 

setting  background  138 

spacing  137 

table  structure  98 

targeting  links  in  139 

using  with  actions  313 

see  also  frames 
auto-generated  image  name  471 
automatic  244 
automatic  formatting  144 
automatic  setting  145, 158 

B 

background 

AutoFrames  138 
frames  138 

Layout  Region  110,119,216,221,264 
page  110,119,216,221,264 

sounds  111 

table  216 

table  cell  221 
background  color 

in  text  boxes  119 

Site  view  44, 344 
background  image  offset  453 
backing  up  sites  52 


Backups  folder  17 
banners  254 

adding  267 

assigning  actions  266 

changing  pictures  268 

custom  names  43 

default  location  254 

editing  236 

orientation  269 

setting  style  269 

SiteStyle  text  237 

using  266 
base  directory  457 
BGSOUND  SRC  349 
blank  site 

default  MasterBorder  124 
BODY  BACKGROUND  349 
body  style  244 
body  text  style  234 
borderless  frames  136 
borders  152 

creating  around  pictures  183 

tables  215 
Browser  Safe  Palette  15 
browsers 

action  support  313 

compatibility  options  93 

default  display  font  122 

displaying  forms  357 

font  settings  23 

fonts  in  AutoFrames  133 

frame  support  133 

frameless,  alternate  content  420 

previewing  sites  22 

redirecting  site  visitors  383 

refreshing  pages  140 

setting  compatibility  48 

using  unsupported  image  files  180 
bullet  type  167 
bulleted  lists  164 

bullet  type  167 
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button  navigation  bars  254 

adding  255 

default  location  254 

see  also  navigation  bars 

setting  style  260 
buttons  254 

changing  picture  on  one  button  263 

custom  names  43 

default  style  254 

rollover  action  330 

SiteStyle  text  237 


cascading  actions  324 

CGI  directory  for  publishing  476 

CGI  scripts  474 

naming  conventions  357 

processing  data  368 

support  368 
CGI-BIN  folder  369 
character  sets 

available  484 

imported  pages  487 

overview  483 

page  486 

section  486 
check  boxes  in  forms  361 
checklist,  publish  profile  456 
child  pages  32 
CHMOD  command  477 
class  files  306, 308 
client-side  imagemaps  286 
collision  detection  action  332 
Color  Picker  14 
colors 

Browser  Safe  palette  15 

changing  14 

HTML  code  412 

palettes  15, 16 

text  147 

Web  safe  14 


combo  boxes  in  forms  362 
Common  Gateway  Interface 
see  CGI 

Component  Development  Kit  (CDK)  371 
components 

Ad  Banner  372 

DynaButtons  374 

Go  Menu  378 

internal  components  372 

Page  components  372 

Picture  Loader  377 

Picture  Rollover  380 

Publish  components  372 

rotating  banner  372 

Rotating  Picture  382 

Screen  Door  383 

Site  Mapper  385 

third-party  components  372 

Ticker  Tape  386 

Time  Based  Picture  388 

types 

Components  folder  16 
Components  toolbar  77 
containers 

defined  88 

Layout  Regions  103 

Layouts  103 

text  boxes  113 
control  bar  12 
conventions  3 
cropping  pictures  181 
Current  Site  Options  dialog  93 
custom  attribute  162 
custom  messages  in  actions  332, 333 
customized  assets  472 
customizing 

templates  58 

D 

data  fields 

defined  392 
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formatted  text  397 

image  file  397 

simple  text  397 
data  list  icon 

SiteStyle,  editing  240 
data  lists 

creating  400 

defined  392 

searching  13 
data  objects 

defined  392 

deleting  408 

external  395, 398 

internal  395, 396 

managing  442 
data  publishing  391 

data  lists,  creating  400 

process  394 

stacked  pages  403 
data,  submitting  via  email  367 
date  format  24 

date  property,  published  sites  472 
dcr  files  292 
decimal  format  24 
deleting 

anchors  276 

data  objects  408 

file  assets  436 

folders  471 

links  285,441 

MasterBorders  130 

stacked  pages  407 

table  rows  and  columns  218 

text  styles  163 

unused  file  assets  437 

variables  444 
dir  files  292 
Director 

ActiveX  control  293 

Netscape  plugin  293 
directory  structure  459 


custom  HTML  409 

customizing  470 

external  HTML  349,351 
distributing  objects  83 
dithering  in  transparent  .gif  files  184 
dll  files  311 
Document  Map  412 
documents 

importing  66, 78 
domain  names 

imported  sites  65 
drop-down  lists  in  forms  362 
dxr  files  292 

DynaButtons  component  374 

sub-buttons  375 
Dynamic  Page  Layout 

HTML  output  method  92, 95 

optimizing  output  95 

using  with  actions  313 
dynamic  page  layout  245 
dynamic  pages  313 

E 

edit  fields  in  forms  357 
edit  style  background 

SiteStyle  241 
editing 

anchors  275 

color  palettes  16 

custom  HTML  you  added  416, 423 
file  assets  435, 436 
hotspots  287 
HTML  410 

HTML  and  scripts  413 
imagemaps  287 
links  285,287 

paths  to  custom  HTML  assets  409 

SiteStyles  250 

variables  444 
ellipses,  see  shapes 
email  links  279 
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email,  submitting  forms  data  367 
EMBED  SRC  349 
Embedded  object  icon  72 
embedded  objects 

creating  116 

moving  116 
exporting 

sites  57 
expressions,  JavaScript  328 
external  data  objects 

definition  of  types  395 

filtering  401 

ODBC  drivers  398 
external  file  editors 

setting  21 
external  HTML 

adding  342 

assets  managed  349 

distinguishing  in  Site  view  344 

publishing  unmodified  code  350 

referencing  as  object  346 

referencing  external  HTML  341 

referencing  from  Site  view  342 

referencing  in  the  Layout  area  344 

referencing  instead  of  importing  342 

sizing  on  page  348 
external  links  272 

creating  278 

updating  439 

F 

fields 

adding  to  internal  data  object  397 
adding  to  stacked  pages  404 
changing  field  names  398 
displaying  all  on  Layout  402 
inserting  170 

file 

directory  structure  459 
file  assets 

adding  434 


deleting  436,437 

editing  436 

external  HTML  349 

managing  433 

opening  436 

types  433 

verifying  437 
File  Data  Source,  external  data  objects  399 
file  editors 

setting  external  21 
file  formats 

.jpg/.jpeg  files  397 

audio  298 

for  internal  data  397 

images  178 

Shockwave  292 

video  297 
file  links  272 

creating  281 
file  names 

HTML  428 

in  frameset  files  428 

files 

.nod  28 

moving  59 

renaming  471 

site  files  28 
filtering  external  data  401 
firewalls,  publishing  with  479 
Fixed  Page  Layout 

forms  357 

HTML  output  method  92, 99 

overlapping  objects  85 
Flash  files  290 
Flashpix  files  1 78 
flyouts  11 
folders 

aliased  471,474 

creating  custom  470 

deleting  471 

renaming  471 
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folders,  virtual 

see  aliased  folders  474 
font  size  149 
fonts 

browser  fonts  in  AutoFrames  133 
browsers  23 

default  display  in  browser  122 

SiteStyle  banners  and  buttons  236 
Form  Handler  component  365 
form  objects 

adding  356 

creating  356 

naming  357 

warning  icons  357 
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